ng-repeat 传递给组件答案

【问题标题】：ng-repeat pass to the componentng-repeat 传递给组件
【发布时间】：2019-04-01 20:35:45
【问题描述】：

您好，我对使用 typescript 进行 angularjs Web 开发非常陌生，并且确实遇到了一个问题。我不认为这应该是一个难题，但我已经花了两天时间。

我试图弄清楚在构造或启动时如何将 ng-repeat 的值从列表传递给子组件。

我的意思是，如果我有一个来自父组件的列表 ([1, 2, 3, 4]) 用于生成 4 个子组件，是否有办法让每个子组件分配一个变量“id”为与重复值关联的值。

例如

<span ng-repeat=variable in list>
    <child-tag></child-tag>
</span>

是否有可能以某种方式将变量从标签或其他东西传递到组件的构造函数中？

重申一下，我使用 typescript 和 angularjs 而不是 angular 2 对此进行了编码。

提前为帮助喝彩。提前抱歉，这可能是一个非常简单的答案，但在任何地方都找不到。

【问题讨论】：

【解决方案1】：

您可以使用 Input 将数据从父组件传递到子组件。输入应使用< 和@ 绑定。 < 符号表示从 v1.5 开始可用的单向绑定。

=: 双向绑定。它使用脏检查并可能导致延迟。它还监视组件范围内的绑定属性。

所以如果你需要给子组件传递一些数据，你需要给它绑定一些属性值。例如：

<span ng-repeat="variable in list">
  <child-tag variable-name="variable.name" ></child-tag>
</span>

在您的子组件声明中绑定这些值，以便您可以访问它们：

angular.module('myApp', []).component('childComponent', {
        bindings: {
           variableName: '<'
        },
   controller: ....

您可以使用以下方式在组件类中访问这些值：this.variableName

您可以根据需要选择一种或两种绑定方式，并且可以将任意数量的对象/属性传递给孩子。

【讨论】：