如何使用 openFromComponent 将snackBarRef 注入组件

Posted 2023-02-23

【中文标题】如何使用 openFromComponent 将snackBarRef 注入组件

【英文标题】：How to inject snackBarRef into a component with openFromComponent

【发布时间】：2019-01-03 20:33:51

【问题描述】：

最新的Material documentation 说如下..

如果您想从组件本身关闭通过 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 而不会导致错误？

【参考方案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 将处理注入snackBarRef。

【讨论】：

不能说是！感谢您的修复。顺便说一句......在调用@Component 进行实例化时，我不再需要使用本地 SnackRef。换句话说，我改变了 this.SnackRef = this.snackBar.openFromComponent(SnackbarComponent, data : id);到 this.snackBar.openFromComponent(SnackbarComponent, data : id);。这样我就不会得到一个没有做任何其他事情的孤儿裁判。很好的答案！谢谢。

【参考方案2】：

改进Dario's answer, 如果要捕获调用组件中的操作按钮单击，则应使用 snackBarRef.dismissWithAction() 在（点击）事件中。

<button mat-raised-button color="accent" (click)="snackBarRef.dismissWithAction()"> data.action </button>

【参考方案3】：

我只在 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'.
    );
  

【讨论】：

snackbar ref 没有定义

【参考方案4】：

顺便说一句……与此同时……我创建了一个全局变量（我很少这样做），然后用……打开了快餐栏。

this.globals.snackBarRef = this.snackBar.openFromComponent(SnackbarComponent, data : 0);

这样，我可以使用数据部分来传递我想要弹出的 html 部分编号，并且一切正常。但我仍然对正确的方法感兴趣。