Угловой 5 Материал закусочной

Question

Проблема, с которой я сталкиваюсь, заключается в том, что компонент закусочной, при инициализации, подключается за пределами cdk-global-overlay-wrapper (который находится внутри cdk-overlay-container)

Что делает его видимым на долю секунды, в середине экрана

Затем он исчезает и повторно присоединяется внутри cdk-global-overlay-wrapper и прокручивается снизу, как и должно быть.

Есть идеи как это изменить?

Answer 1

У меня была похожая проблема, когда MatSnackBar существовал вне зоны Angular, что нарушает его взаимодействие с хуками жизненного цикла Angular.

Это произошло только в том случае, когда стэк вызова snackBar.open() был первоначально исключен сторонним сервисом (в моем случае SignalR).

Я исправил это, обернув snackBar.open() команда в NgZone.run() задача в моем компоненте. Это позволяет вам повторно войти в угловую зону из задачи, которая была исключена извне.

пример:

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

Это не совсем та проблема, которую вы описали, но она может помочь.