Angular5,组件之间的交互

前端之家收集整理的这篇文章主要介绍了Angular5,组件之间的交互前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
目前正在进行Angular5课程,经过一段时间的研究后,我仍然完全不了解以下内容

码:

App.component.html:

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

App.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server',name:'Testserver',content:'just a test!'},{type: 'server',content:'just a test!'}
];  
   }

服务器element.component.html:

<p>
    <strong *ngIf="element.type === 'server'" style="color: red">
{{ element.content }}</strong>
    <em *ngIf="element.type === 'blueprint'">{{ element.content }}</em>
  </p>

服务器element.component.ts:

import { Component,OnInit,Input } from '@angular/core';

@Component({
  selector: 'app-server-element',templateUrl: './server-element.component.html',styleUrls: ['./server-element.component.css']
})
export class ServerElementComponent implements OnInit {
 @Input() element: {type:string,name:string,content:string};
}

题:

我对这部分的作用有点困惑:

*ngFor="let serverElement of serverElements"
  [element]="serverElement"

在我目前的理解中,它是一个for循环,循环遍历serverElementsArray的所有元素.但那么[element] =“serverElement”具体做什么呢?

解决方法

你完全正确地了解了serverElementsArray的所有元素.

使用[element] = …绑定组件的输入.继续阅读…

猜你在找的Angularjs相关文章