Angular 5材料小吃吧 [英] Angular 5 Material snackbar

问题描述

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

The issue I'm having is that, the snackbar component, when initialised, is attached outside of cdk-global-overlay-wrapper (Which is within cdk-overlay-container)

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

Which makes it visible for a split second, in the middle of the screen

然后消失并重新附加在cdk-global-overlay-中从底部开始包装和滚动。

It then disappears and re-attaches itself within cdk-global-overlay-wrapper and scrolls from bottom as it should.

任何想法如何更改？

推荐答案

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

I had a similar issue where MatSnackBar existed outside the Angular zone which breaks it's interaction with Angular's lifecycle hooks.

这只发生在snackBar.open（）callstack最初被第三方服务（在我的情况下是SignalR）中解雇时。

This was only happenng when the snackBar.open() callstack was originally exicuted by a 3rd party service (in my case SignalR).

我通过在 NgZone中包装 snackBar.open（）命令来修复它。在我的组件中运行（）任务。这允许您从外部扩展的任务重新进入Angular区域。

I fixed it by wrapping the snackBar.open() command in a NgZone.run() task within my component. This allows you to reenter the Angular zone from a task that was exicuted from outside.

示例：

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

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

This is not exactly the problem you described, but it may help.

这篇关于Angular 5材料小吃吧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！