Question

我是Angular 2的初学者，我对如何通过父组件访问子组件属性的教程示例抱有以下疑问。

进入主要组件（ app-component ）我有 app.component.html 视图：

<div class="container">
      <app-server-element
        *ngFor="let serverElement of serverElements"
        [srvElement]="serverElement">
      </app-server-element>
    </div>
  </div>
</div>

它正在迭代 app.component.ts 类中定义的 serverElements 数组，如下所示：

serverElements = [{type: 'server', name: 'TestServer', content: 'Just a Test'}];

它正在使用<app-server-element>组件中的元素（此时只有1，但这并不重要）。<app-component>组件是@Component({ selector: 'app-server-element', templateUrl: './server-element.component.html', styleUrls: ['./server-element.component.css'] }) export class ServerElementComponent implements OnInit { @Input('srvElement') element: {type: string, name: string, content: string}; constructor() { } ngOnInit() { } }的子组件。

进入 ServerElementComponent 类我有：

  <app-server-element
    *ngFor="let serverElement of serverElements"
    [srvElement]="serverElement">
  </app-server-element>

所以，进入 app.component.html 视图我有：

@Input('srvElement') element: {type: string, name: string, content: string};

所以从我所理解的 [srvElement] =“serverElement”意味着我正在访问 ServerElementComponent 子组件类的这个属性（用<注释）强> @input

NSCoding

基本上它与前一次迭代的确切含义是什么？

我用这种方式解释它：

迭代 serverElements 数组（这是一个Object的通用数组，其指定的字段集对应于 @Input（'srvElement'）元素的字段集在 app-server-element 子组件中定义。然后使用当前的 serverElement 元素在使用的组件中构建 @Input（'srvElement'）元素（用于主视图）。

但我不确定这一点。这个 [srvElement] =“serverElement”语法的确切含义是什么？

也许我错了，但在我看来像是演员：我有一个通用对象，它被转换为子组件所需的类型。我可以这样做，因为子组件中定义的类型由 @Input（）装饰器注释，因此父组件可以访问它。

这是正确的解释吗？

Answer 1

在您的示例中，您有一个主要组件＆＃34; app-component＆＃34;其中包含serverElements。

的列表

主要组件的模板包含此循环：

<app-server-element
    *ngFor="let serverElement of serverElements"
    [srvElement]="serverElement">
</app-server-element>

这意味着Angular会为app-server-element中的每个项目生成serverElements个组件。

[srvElement]="serverElement"表示对于每个app-server-element组件，主要组件（app-component）为当前serverElement提供input。

因此，如果serverElements中有2个项目，则会生成2个app-server-element个组件：

第一个组件将收到serverElements
第二个组件将收到serverElements

您将拥有app-server-element组件的2个不同实例。

@Input()装饰器并不代表accessible by the parent，而是it's a data the component can receive as input given by his parent。

Answer 2

我不是专业人士所以我会尝试用自己的话语向你解释：

您从HTML（您的第一个模板）开始。在其中，您可以看到

<app-server-element
    *ngFor="let serverElement of serverElements"
    [srvElement]="serverElement">
</app-server-element>

这里有几件事：

首先，您可以看到选择器app-server-element。这意味着整个标记将被您在组件中定义的HTML模板替换。
然后你有*ngFor。这是一个内置指令，允许您基于变量重复标记。
最后，您拥有[srvElement]属性。这是一个输入属性：等号（此处为serverElement）右侧的内容将发送到您的组件。

现在在您的组件中，您可以看到

@Input('srvElement') element: {type: string, name: string, content: string};

这里做的是你获取对之前发送的输入的引用：通过这样做，它告诉Angular将这个变量绑定到它发送的内容＆＃34; parent＆＃34;零件。您还可以给出元素应该具有的结构（对应于您在＆＃34; parent＆＃34中发送的变量的结构;）。

所以要在一个句子中，它给出的第一个元素：

Iterate through serverElements, and for each item of this list, send this item to the "child" component and replace the app-server-element tag with the HTML template of the "child" component.

对于第二个元素，它给出：

Grab the value the "parent" component sent you, and register it in a variable so that you can use it in my HTML template (server-element.component.html)

我希望这会对你有所帮助。

这个Angular 2示例如何正确地显示如何使用父组件的子组件属性？

2 个答案: