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>