javascript - Angular 5 Material snackbar - Stack Overflow

admin管理员组

文章数量:1355642

The issue I'm having is that, the snackbar ponent, 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?

The issue I'm having is that, the snackbar ponent, 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?

• javascript
• css
• angular
• angular-material2

Share Improve this question Follow asked Jan 24, 2018 at 12:58 RasMasonRasMason 2,21255 gold badges3636 silver badges6060 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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() mand in a NgZone.run() task within my ponent. 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.ponent.html',
  styleUrls: ['./example.ponent.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.

本文标签： javascriptAngular 5 Material snackbarStack Overflow