时间戳

首页 > 解决方案 > 如何使用 openFromComponent 将snackBarRef 注入组件

reference - 如何使用 openFromComponent 将snackBarRef 注入组件

问题描述

最新的材料文档说以下..

如果您想从组件本身关闭通过 openFromComponent 打开的自定义小吃吧，您可以注入 MatSnackBarRef。

但他们没有告诉你如何去做。

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

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) { }

我的期望是我可以在组件中创建一个可以作用于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 传递到组件中吗？或者，有没有办法通过数据部分传递 ref 而不会导致错误？

标签： referenceangular6snackbar

解决方案

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

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。

推荐阅读