Angular 5 Material snackbar

问题

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

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?

回答1:

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

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

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.

example:

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.

来源：https://stackoverflow.com/questions/48423110/angular-5-material-snackbar