1.什麼是@input
@input的作用是定義模組輸入，是用來讓父級元件向子元件傳遞內容。

2.@input用法
首先在子元件中將需要傳遞給父元件的變數用@input()修飾

需要在子元件ts檔案import中還新增Input

例項:

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

例如:

子元件的ts:

@Input() person;  //@Input 此命令用來修飾person是用來接收父元件傳遞的值

前面曾經講過ngModel 單向傳值，所以我們還需要在父元件中使用ngModel單向傳值，用子元件的person接收父元件傳遞的值。

父元件ts:

AppPerson = {
 
       name: “Henry”,
 
       color: “yellow”
 
};

父元件html:

<app-exam [person]=”AppPerson”></app-exam>

子元件html:

<p> {{person.name}} </p>
 
<p> {{person.color}} </p>

執行結果:

由此結果可以看出，子元件屬性person已經成功接收到了父元件AppPerson的值。

簡單的Input完成！