在Angular 7工作示例中将动态数据从父组件传递到子组件

Question

我有此代码：

<ion-item *ngFor="let product of products">
            <ion-label>
              {{ product }}
            </ion-label>
</ion-item>
<ng-container *ngSwitchCase="states.Product">
      <product-details></product-details>
</ng-container>

我想将父组件的* ngFor的乘积值传递给product-details子组件。我应该使用输入或服务吗？请举个例子。

Answer 1

您的产品详细信息不在*ngFor内，如果product在其范围之内，则只能将其传递给<product-details>。我当然建议在此处使用输入，因为它有助于使您的product-details组件保持独立，并具有仅表示组件的作用。如果使用服务，则将依赖该服务必须从某处获取数据这一事实，在这种情况下，这会使product-details变得过于复杂。这是示例：

<ion-item *ngFor="let product of products">
  <ion-label>
    {{ product }}
  </ion-label>
  <div [ngSwitch]="state">
    <ng-container *ngSwitchCase="states.Product">
      <product-details [product]="product"></product-details>
    </ng-container>
  </div>
</ion-item>

以及您的product-details.component.ts：

@Input() product: Product;

Answer 2

仅将@Input装饰器用于从父组件传递到子组件的数据。对于动态绑定，可以使用如下所示的属性绑定[]-

<ng-container *ngFor="let product of products">
   <ion-item>
       <ion-label>
          {{ product }}
       </ion-label>
      <ng-container *ngSwitchCase="states.Product">
          <product-details [productName]='product'></product-details>
      </ng-container>
   </ion-item>
</ng-container>

@Input('productName') productName: type

此外，请记住，您可以在ngOnInit生命周期挂钩中获得值，而不是在子组件的构造函数中。

请参考下面的工作示例以供参考。

Working Example