如何使用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文件中，并且不显示正在传递的引用.但是，由于我想使用更集中的方法，我使用...创建了一个新模块.

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按钮之类的东西关闭小吃店……只要他们可以访问裁判！

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:SnackBarRef}换成了{data:0}.这样，我看不到任何错误，并且可以将数据值0用作其他用途，但是当然，我也没有引用的句柄可在本地使用.

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的data部分之外，还有其他方法可以将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屋！