Angular：@Input注解

参考：中文官方文档 Input 说明 。

Input：可以从父组件传来一个值 。

示例：

1. 分别创建父组件user-list 和 子组件 user-item

   

2. 修改子组件user-item

   首先，修改子组件ts文件 user-item.component.ts 。

   

   然后，修改父组件html文件 user-list.component.html 。

   

3. 效果展示

   

子组件user-item.component.ts代码：

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

@Component({
  selector: 'app-user-item',
  templateUrl: './user-item.component.html',
  styleUrls: ['./user-item.component.css']
})
export class UserItemComponent implements OnInit {

  @Input() name:string;

  constructor() { 

  }

  ngOnInit() {
  }

}

父组件user-list.component.html代码：

<ul>
    <app-user-item *ngFor="let individualUserName of names" [name]='individualUserName'></app-user-item>
</ul>