【问题标题】：Pass dynamic data from parent to child component in Angular 7在Angular 7中将动态数据从父组件传递给子组件
【发布时间】：2020-05-26 15:49:48
【问题描述】：

我有这个代码：

<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 值传递给 product-details 子组件。我应该使用输入还是服务？请举个例子。

【问题讨论】：

为此使用输入。当您需要保持多个组件的状态时，服务更有用，尤其是当它们彼此不相关时。这是直接关系，使用 Input() 是有意义的
@Sam 请用我写的动态数据举例。
这里有一些例子，angular.io/guide/…。这是一本了解孩子/父母如何相互交谈的好书。
在您的代码中，product-details 选择器超出了 *ngFor 的范围（它被 ion-item 选择器关闭）。你确定这是预期的行为吗？如果不是请修改代码。
如果它是可点击的，则将'product'变量发送到事件处理程序，然后它可以用作局部变量。例如，在离子标签选择器中，执行 (mouseup)="mouseUp(product)";然后将其存储在可以在产品详细信息选择器中使用的局部变量中。但是，我确实想知道您是否愿意在 ng-container 中过滤产品，然后可以通过采用以下答案之一来绕过此卷积。

标签： angular input angular7 ionic4 ngfor

【解决方案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`

【讨论】：

它不起作用，因为产品详细信息选择器超出了 *ngFor 的范围。这就是我发帖的原因。还有其他方法吗？ ——
@KathrineHanson 检查我的更新答案，product-details 也在范围内

【解决方案2】：

根据您的代码，您希望访问*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>

【讨论】：

【解决方案3】：

您的产品详细信息不在*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;

【讨论】：

如果你只是照原样复制它，可能不会，因为我不知道你的ngSwitch 应该用什么操作。把ngSwitch和*ngSwitchCase删掉再试试吧。
没有。问题是产品详细信息选择器超出了 *ngFor 的范围。这就是我发帖的原因。有没有其他办法？
但这就是我所说的，如果您将产品详细信息选择器移动到 *ngFor 中，那么您将在那里获得可用的产品。否则我不明白你的意图。你到底想达到什么目的？