Angular 5 Material 小吃店 [英] 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-wrapper 中，并按原样从底部滚动.

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

有什么想法可以改变这种情况吗?

Any ideas how to change this?

推荐答案

我遇到了一个类似的问题，即 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() 调用堆栈最初由第3 方服务(在我的情况下为SignalR)执行时才发生.

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

我通过将 snackBar.open() 命令包装在我的组件内的 NgZone.run() 任务中来修复它.这允许您从外部执行的任务中重新进入 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 Material 小吃店的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！