如何使用 openFromComponent 将 snackBarRef 注入到组件中

Question

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

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

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

创建了一个新模块

ng g component components/snackbar

这样，我应该可以传入@Input 以根据需要呈现不同的html。这将进一步允许诸如品牌、多个按钮和 html 按钮关闭小吃店等事情......只要他们可以访问 ref!

我的调用 .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？

Answer 1

顺便说一下...与此同时...我创建了一个全局变量（我很少这样做），并用...打开了小吃店...

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

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

Answer 2

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

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。

Answer 3

改进，如果想要捕获调用组件中的动作按钮点击，应该使用 snackBarRef.dismissWithAction() 在（点击）事件中。

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

Answer 4

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

如何使用 openFromComponent 将 snackBarRef 注入到组件中

How to inject snackBarRef into a component with openFromComponent

reference

snackbar

angular6