javascript - 这个 Angular 2 示例到底如何工作，展示了如何通过父组件使用子组件属性？

Question

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

进入主要组件(app-component)，我有这个app.component.html View :

<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'}];

并且它正在使用元素(此时只有1个，但这并不重要)进入<app-server-element>组件是 <app-component> 的子组件.

进入我的ServerElementComponent类:

@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() {
  }
}

所以，进入我的 app.component.html View :

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

因此，根据我的理解，[srvElement]="serverElement" 意味着我正在访问 ServerElementComponent 子组件类的此属性(用 <强>@输入

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

那么基本上，上一次迭代到底意味着什么？

我是这样解释的:

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

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

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

这个解释正确吗？

Answer 1

我不是专业人士，所以我会尝试用我自己的话简单地向您解释:

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

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

这里有几件事:

• 首先，您可以看到选择器app-server-element。这意味着整个标签将被您在组件中定义的 HTML 模板替换。
• 然后你就有了一个*ngFor。这是一个内置指令，允许您根据变量重复标签。
• 最后，您有 [srvElement] 属性。这是一个 Input 属性:等号右侧的内容(此处为 serverElement)将被发送到您的组件。

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

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

这里所做的是获取对之前发送的输入的引用:通过这样做，它告诉 Angular 将此变量绑定(bind)到其“父”组件发送的内容。您还给出了元素应具有的结构(对应于您在“父级”中发送的变量的结构)。

因此，要在句子中使用它，对于它给出的第一个元素:

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)

希望这对您有帮助。