Angular新手求助：如何从matSnackBar的openFromComponent获取数据？

你已经迈出了正确的第一步——在调用openFromComponent时通过data参数传递了apiName，接下来只需要在自定义的CustomSnackbarComponent中注入MAT_SNACK_BAR_DATA令牌，就能轻松拿到这份数据。

具体步骤如下：

1. 导入必要的依赖 #

首先在你的自定义组件文件顶部，补充导入MAT_SNACK_BAR_DATA：

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
import { DomSanitizer } from '@angular/platform-browser';

2. 在构造函数中注入并接收数据 #

修改组件的构造函数，通过@Inject装饰器注入MAT_SNACK_BAR_DATA，并把数据赋值给组件属性方便后续使用：

export class CustomSnackbarComponent implements OnInit {
  // 声明属性存储传入的API名称
  public apiName: string;

  constructor(
    private sanitizer: DomSanitizer,
    @Inject(MAT_SNACK_BAR_DATA) public data: any
  ) {
    // 从注入的data中取出传入的apiName
    this.apiName = data;
  }

  ngOnInit(): void {
    // 在这里可以直接使用this.apiName做你需要的操作
    console.log('获取到的API名称:', this.apiName);
  }
}

3. （可选）在模板中展示数据 #

如果需要在自定义snackbar的模板里展示apiName，直接用插值表达式即可：

<div class="snackbar-content">
  <p>当前调用的API：{{ apiName }}</p>
</div>

另外提个小细节：你调用openFromComponent的代码里，data: this.apiName;后面的分号应该改成逗号，避免语法错误：

this.snackBar.openFromComponent(CustomSnackbarComponent, { 
  duration: 5000000, 
  data: this.apiName // 这里换成逗号哦
});

这样就能完美获取到你传入的apiName数据啦！

内容的提问来源于stack exchange，提问作者Matthis.h