Reference 如何使用openFromComponent将snackBarRef注入组件

最新消息如下

如果要关闭通过openFromComponent打开的自定义快餐店，可以从组件本身内部注入MatsnakBarref

但是他们没有告诉你怎么做

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

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.discouse（）的函数；根据需要。但是，当我运行应用程序时，我得到以下错误

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

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

---

除了使用openFromComponent的数据部分之外，还有其他方法将snackBarRef传递到组件中吗？或者，是否有一种方法可以在不引起错误的情况下将ref传递到数据部分？

顺便问一下。。。同时…我创建了一个全局变量（我很少这样做），并用

this.globals.snackBarRef=this.snackBar.openFromComponent（SnackbarComponent，{data:0}）

---

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

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

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/core'导入{Component，Inject}；
从“@angular/material”导入{MAT_SNACK_BAR_DATA，matsnakbarref}；
@组成部分({
选择器：“我的通知”，
模板：`
{{data.message}

{{data.action}
`,
})
导出类TestNotificationComponent{
建造师(
公共快餐店：Matsnakbarref，
@注入（MAT_零食_酒吧_数据）公共数据：任意，
) {}
}

Angular将处理snackBarRef的注入。

改进， 如果要捕获调用组件中的操作按钮单击，应使用

snackBarRef.dismissWithAction（）

在（单击）事件中

{{data.action}

我只在角度分量中这样做：

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'.
    });
  }

---

说“是”还不够！谢谢你的修复。顺便说一句在调用@Component进行实例化时，我不再需要使用本地SnackRef。换句话说，我更改了this.SnackRef=this.snackBar.openFromComponent（SnackbarComponent，{data:id}）；仅限于此.snackBar.openFromComponent（SnackbarComponent，{data:id}）；。这样我就不会有一个孤儿裁判，他什么都没做。回答得好！谢谢。snackbar ref未定义

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'.
    });
  }