javascript - Angular 5 Material snackbar

Question

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

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

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

有什么想法可以改变吗？

Answer 1

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

这仅在 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");
    });
  }
}

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