Question

我有一个对话框的Angular组件。构造函数如下所示：

class BigComponent {
    constructor(
        public dialogRef: MatDialogRef<BigComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any)
    {
        this.userId = data.userId;
        this.authToken = data.authToken;
    }
}

这是我显示对话框的方式（来自应用程序的另一部分）：

const dialogRef = this.dialog.open(BigComponent, {
  width: '600px',
  height: '300px',
  data: { userId: '12345', authToken: 'blabla' }
});

data是注入到组件中的数据，请参见official documentation。基本上，BigComponent是组件库的一部分。该库中的所有组件将在多个应用程序之间共享。因此，data是我们需要传递给BigComponent的东西，它可以运行：例如，进行API调用而没有身份验证问题。

但是我也有一个大组件内部的多个小组件：

SmallComponent1
SmallComponent2
SmallComponent3

还有BigComponent service可以查询API。我需要使用BigComponent service 小零件但是，为此，我需要将authToken从小型组件传递到服务。

所以我现在要做的是通过这种方式传递authToken：

BigComponent -> SmallComponent1 -> BigComponent service
BigComponent -> SmallComponent2 -> BigComponent service
BigComponent -> SmallComponent3 -> BigComponent service

它可以工作，但是我想知道是否有任何方法可以用BigComponent service初始化authToken，所以我没有需要这条长链吗？

P.S。我尝试通过以下方式将data注入服务中，但没有成功：

export class BigComponentService {
    constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}

错误消息是：

big.component.html：48错误错误：StaticInjectorError [InjectionToken MatDialogData]： StaticInjectorError [InjectionToken MatDialogData]： NullInjectorError：没有InjectionToken MatDialogData提供程序！

角度，要服务的组件属性

0 个答案: