在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> 变得过于复杂。 这是示例：

@Input() product: Product;

并在您的 product-details.component.ts 中：

    <style>
    .img {
      position: absolute;
      left: 40%;
      transform: translateX(-50%);
    }
    .p-wrap {
      color: #fff;
      position: relative;  
      display: none;
    }
    .text {   
      display:none;
      color: #000;
      position: absolute;
      left: -130px;
    }
   </style>

  <div class="img">
   <div class="p-wrap">
     <p class="text"> Oh hey Mark</p>
   </div>
  <img
    src="https://source">
 </div>

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>