将数据从父组件传递到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。