将数据从父组件传递到Angular中的嵌套子组件

Question

我很难理解如何在Angular components之间提供数据。我已经阅读了@Input和@Output，但我不确定这是否是我需要使用的，如果是的话，如何。

我有一个父亲component（一个独特的assetId资产），有一个嵌套（子）component，应该列出所有与特定asset相关的文件，基于assetId。

如何将assetId从asset component传递到document component以用于获取特定记录所需的数据？

Answer 1

模板方案：

asset.component.ts：

@Input() assetId: string;

asset的用法：

<asset assetId="x"></asset>

document.component.ts：

@Input() assetId: string;

asset.component.html：

<document [assetId]="assetId"></document>

基本上它只是将assetId传递给document，它位于asset的模板中。

编辑

仅部件解决方案：

export class AssetComponent {
  @ViewChild(DocumentComponent) document: DocumentComponent;
  @Input() set assetId(assetId) {
    this._assetId = assetId;
    this.document.assetId = assetId;
  } 

  get assetId() {
    return this._assetId;
  }

  private _assetId: string;
}

在这里，您可以通过DocumentComponent获取ViewChild，并通过assetId实例访问其document财产。确保assetId中的DocumentComponent是public。