时间戳

首页 > 解决方案 > Angular 设置 @inputs 并从不相关的组件访问 @outputs

angular - Angular 设置 @inputs 并从不相关的组件访问 @outputs

问题描述

我有一个动态表组件（DataTableComponent），它接受各种@inputs 并包含一个@output：

<app-data-table (buttonClickedEvent)="buttonClickedEvent($event)" [data]="testTableSetup.data" [mutatorArray]="testTableSetup.mutatorArray" [hiddenProps]="testTableSetup.hiddenProps" [showSelectColumn]="testTableSetup.showSelectColumn" [showEditColumn]="testTableSetup.showEditColumn"
[actionButtons]="testTableSetup.actionButtons">
</app-data-table>

我还有一个动态对话框组件，它可以接受一个可选参数，这样我就可以传入其他要在其中显示的组件：

openDialog(): void {
    const dialogConfig = new MatDialogConfig();
    let dialogConfigModel: DialogConfigModel = {
      dynamicFormModel: [],
      additionalComp: DataTableComponent,
      click_ButtonText: "Save",
      close_ButtonText: "Close",
      dialogTitle: "SOME TITLE"
    };
    dialogConfig.data = dialogConfigModel;

    const dialogRef = this._dialog.open(DynamicDialogComponent, dialogConfig);

    dialogRef
      .afterClosed()
      .pipe(
        take(1),
        takeUntil(this._destroyed$)
      )
      .subscribe(results => {
        // Stuff Here.
      });
  }

该组件确实按预期出现在我的对话框中，但显然没有数据。

如何在这个 openDialog() 方法中访问我的 DataTableComponent @inputs 和 @output？我需要能够设置@inputs 数据并在@output 方法被触发时获取。这不可能吗？还是有更好的方法来实现这一点？我已经检查了注射器，但我无法让实施工作。

标签： angularangular-material

解决方案

您需要通过服务与它们进行通信：
https
://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service 因为它们之间没有直接关系，您可以注入服务在两者中，
并从一个中触发一个可观察的，
以收听第二个中的变化；）

推荐阅读