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

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