Angular 5 Material 小吃吧

Question

我遇到的问题是，snackbar 组件在初始化时附加在 cdk-global-overlay-wrapper 之外（在 cdk-overlay-container 中）

这让它在屏幕中间一瞬间可见

然后它消失并重新连接到 cdk-global-overlay-wrapper 中，并按应有的方式从底部滚动。

任何想法如何改变这一点？

Answer 1

我有一个类似的问题，即 MatSnackBar 存在于 Angular 区域之外，这破坏了它与 Angular 生命周期挂钩的交互。

这仅在snackBar.open() 调用堆栈最初由第3 方服务（在我的情况下为SignalR）执行时才发生。

我通过将snackBar.open() 命令包装在我的组件内的NgZone.run() 任务中来修复它。这允许您从外部执行的任务重新进入 Angular 区域。

示例：

import { Component, NgZone } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent {

  constructor( private snackBar: MatSnackBar, private zone: NgZone ) { }

  showSnackBar() {
    this.zone.run(() => {
      this.snackBar.open("message", "action");
    });
  }
}

这不完全是您描述的问题，但它可能会有所帮助。