reference - 如何使用 openFromComponent 将 SnackBarRef 注入(inject)到组件中

Question

最新Material documentation说以下..

If you want to close a custom snack-bar that was opened via openFromComponent, from within the component itself, you can inject the MatSnackBarRef.

但他们没有向您展示如何如何做到这一点。

在他们的示例中，他们将组件嵌套在与调用模块相同的 .ts 文件中，并且他们不显示传入的引用。但是由于我想使用更集中的方法，我使用...创建了一个新模块

ng g component components/snackbar

这样，我应该能够传入@Input来根据需要渲染不同的html。这将进一步允许诸如品牌、多个按钮和 html 按钮关闭 snackbar 之类的东西......只要它们有权访问引用!

我的调用 .ts 有以下内容...

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

组件.ts具有以下构造函数...

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

我的期望是我可以在组件中创建一个可以作用于 SnackBarRef.dismiss() 的函数；如所须。但是，当我运行该应用程序时，出现以下错误...

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

为了确保管道正确，我将 {data : SnackBarRef} 替换为 {data : 0}。通过这样做，我没有看到任何错误，并且我可以将数据值 0 用于其他用途，但当然我也没有在本地使用的 ref 句柄。

除了使用 openFromComponent 的数据部分之外，还有其他方法将 SnackBarRef 传递到组件中吗？或者，有没有办法通过数据部分传递引用而不导致错误？

Answer 1

我今天遇到了同样的问题，但找到了解决方案:

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 将处理注入(inject) SnackBarRef。