如何使用 openFromComponent 将snackBarRef 注入到组件中 [英] How to inject snackBarRef into a component with openFromComponent

问题描述

最新的材料文档如下..

如果你想关闭一个通过 openFromComponent 打开的自定义小吃店，你可以从组件内部注入 MatSnackBarRef.

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

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

but they don't show you how to do it.

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

In their example, they nest a component within the same .ts file as the calling module, and they don't show the ref being passed in. But since I want to use a more centralized approach, I have created a new module using...

ng g component components/snackbar

这样，我应该能够传入@Input 来根据需要呈现不同的html.这将进一步允许诸如品牌、多个按钮以及 html 按钮关闭小吃栏之类的事情……只要他们可以访问 ref！

This way, I should be able to pass in @Input to render different html depending on need. This would further allow for things like branding, multiple buttons, and for html buttons to dismiss the snackbar… as long as they have access to a ref!

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

My calling .ts has the following...

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

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

the component .ts has the following constructor...

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

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

My expectations are that I could then create a function in the component that could act upon snackBarRef.dismiss(); as needed. However, when I run the app, I get the following error...

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

为了确保我的管道是正确的，我将 {data : snapBarRef} 换成了 {data : 0}.通过这样做，我看不到任何错误，我可以将 0 的数据值用于其他事情，但当然我也没有在本地使用的 ref 句柄.

Just to make sure I had the plumbing right, I swapped out {data : snackBarRef} to {data : 0}. By doing that, I don't see any errors and I can use the data value of 0 for other things, but of course I also don't have a handle on the ref to use locally.

除了使用 openFromComponent 的数据部分之外，还有其他方法可以将snackBarRef 传递到组件中吗?或者，有没有办法将 ref 传递到数据部分而不会导致错误?

Is there another way to pass the snackBarRef into the component other than using the data section of the openFromComponent? or, alternatively, is there a way to pass the ref through the data section without causing the error?

推荐答案

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

I was stuck on the same problem today, but found the solution:

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 的注入.

Angular will handle injecting the snackBarRef.

这篇关于如何使用 openFromComponent 将snackBarRef 注入到组件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！