在 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

只需使用 @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`

Answer 2

您的产品详情不在*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>

并且在您的产品中-details.component.ts:

@Input() product: Product;

Answer 3

根据您的代码，您想要访问 *ngFor 范围之外的变量 'product'。我不推荐这种行为，但由于您在范围内有一个事件处理程序，实现它的一种方法是在事件处理程序中发送值：

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

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

Pass dynamic data from parent to child component in Angular 7

angular

input

angular7

ionic4

ngfor

`Working Example`