Angular 5材料小吃吧

Question

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

这使得它在屏幕中间瞬间可见

它然后消失并重新附加在cdk-global-overlay-wrapper中并从底部滚动它应该。

任何想法如何改变这个？

Answer 1

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

这只发生在snackBar.open（）callstack最初被第三方服务（在我的情况下是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");
    });
  }
}

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