Как внедрить закускуBarRef в компонент с помощью openFromComponent

В последней документации по материалам говорится следующее.

Если вы хотите закрыть пользовательскую закусочную, которая была открыта через openFromComponent, изнутри самого компонента вы можете внедрить MatSnackBarRef.

но они не показывают вам, как это сделать.

В их примере они вкладывают компонент в тот же файл .ts, что и вызывающий модуль, и они не отображают передаваемую ссылку. Но поскольку я хочу использовать более централизованный подход, я создали новый модуль, используя...

ng g component components/snackbar

Таким образом, я должен иметь возможность передать @Input для отображения другого HTML в зависимости от необходимости. Это также позволит таким вещам, как брендинг, несколько кнопок и html-кнопки, закрывать закусочную… до тех пор, пока у них есть доступ к ссылке!

Мой вызов .ts имеет следующее...

var snackBarRef : any;
snackBarRef = this.snackBar.openFromComponent(SnackbarComponent, {data : snackBarRef});

компонент .ts имеет следующий конструктор...

constructor(public snackBar: MatSnackBar, @Inject(MAT_SNACK_BAR_DATA) public data: any) { }

Я ожидаю, что затем смогу создать в компоненте функцию, которая будет воздействовать на закускуBarRef.dismiss(); по мере необходимости. Однако, когда я запускаю приложение, я получаю следующую ошибку...

Uncaught (in promise): Error: StaticInjectorError(AppModule)[SnackbarComponent -> InjectionToken MatSnackBarData]: 
  StaticInjectorError(Platform: core)[SnackbarComponent -> InjectionToken MatSnackBarData]

Просто чтобы убедиться, что у меня правильная сантехника, я заменил {данные: закускаБарРеф} на {данные: 0}. Делая это, я не вижу никаких ошибок и могу использовать значение данных 0 для других целей, но, конечно, у меня также нет дескриптора ссылки для локального использования.

Есть ли другой способ передать закускуBarRef в компонент, кроме использования раздела данных openFromComponent? или, в качестве альтернативы, есть ли способ передать ссылку через раздел данных, не вызывая ошибки?


reference snackbar angular6
person AppDreamer    schedule 26.07.2018    source источник

Ответы (4)


arrow_upward
30
arrow_downward

Сегодня я застрял в той же проблеме, но нашел решение:

import { Component, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material';

@Component({
  selector: 'my-notification',
  template: `
    <p>{{ data.message }}</p>
    <button mat-raised-button
            color="accent"
            (click)="snackBarRef.dismiss()">{{ data.action }}</button>
  `,
})
export class TestNotificationComponent {
  constructor(
    public snackBarRef: MatSnackBarRef<TestNotificationComponent>,
    @Inject(MAT_SNACK_BAR_DATA) public data: any,
  ) {}
}

Angular справится с внедрением snackBarRef.

person Dario Vogogna    schedule 02.08.2018
comment
Не могу сказать ДА достаточно! Спасибо за исправление. Кстати... Мне больше не нужно было использовать локальный SnackRef при вызове @Component для создания экземпляра. Другими словами, я изменил this.SnackRef = this.snackBar.openFromComponent(SnackbarComponent, {data: id}); только для этого.snackBar.openFromComponent(SnackbarComponent, {data: id});. Таким образом, я не остался с рефери-сиротой, который ничем другим не занимался. Отличный ответ! Спасибо. - person AppDreamer; 02.08.2018

arrow_upward
5
arrow_downward

Улучшая ответ Дарио, если кто-то хочет зафиксировать нажатие кнопки действия в вызывающем компоненте, следует использовать snackBarRef.dismissWithAction() в (нажмите ) мероприятие.

<button mat-raised-button color="accent" (click)="snackBarRef.dismissWithAction()">{{ data.action }}</button>
person Sushant Kumar    schedule 09.01.2020

arrow_upward
0
arrow_downward

Я сделал это только в компоненте Angular:

import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-tucamara',
  templateUrl: './tucamara.component.html',
  styleUrls: ['./tucamara.component.scss']
})

export class TucamaraComponent implements OnInit {

snackBarRef: any;

constructor(private _snackBar: MatSnackBar) { }

ngOnInit(){

this.openSnackBar('El correo no existe en la BD por favor registrese.', 'Registrarme');
        this.snackBarRef.afterDismissed().subscribe(() => {
          console.log('::::::::::The snack-bar was dismissed'); // KYBC.Borrar.
          dosomething(); // KYBC.Do something!
        });

}

openSnackBar(mensaje: string, accion: string) {
    this.snackBarRef = this._snackBar.open(mensaje, accion, {
      duration: 5000, // KYBC.Time in milliseconds.
      verticalPosition: 'top', // KYBC.Posible values: 'top' | 'bottom'.
      horizontalPosition: 'center' // KYBC.Posible values: 'start' | 'center' | 'end' | 'left' | 'right'.
    });
  }
person KYBC Software    schedule 21.01.2020
comment
Ссылка на закусочную не определена - person Jason; 18.08.2020

arrow_upward
-2
arrow_downward

Кстати... тем временем... я создал глобальную переменную (что редко делаю) и открыл закусочную с помощью...

this.globals.snackBarRef = this.snackBar.openFromComponent (SnackbarComponent, {данные: 0});

Таким образом, я мог бы использовать раздел данных для передачи номера раздела html, который я хотел вывести, и все работало нормально. Но меня по-прежнему интересовал бы правильный способ сделать это.

person AppDreamer    schedule 26.07.2018