[DAY-8] Angular元件的互動 | angular output範例
在第二篇,為什麼選擇選擇Angular的文章提到,Angular的其中之一個優點是高度模組化,可以像樂高一樣,高度與其他元件結合與抽離。而高度模組化的訣竅在於,每一個元件都是一個獨立的個體,可以決定有什麼元件的資料可以輸入:同樣地,也可以決定有什麼元件的資料或方法可以輸出。如何設計元件的輸入與輸出,將會影響到元件的模組化的實用性與可維護性,因此本篇將要來探討如何設計元件的輸入與輸出。本篇的教學例子還是使用英雄的例子為例繼續:heros=[{name:‘兩津勘吉,age:35},{name:秋本麗子,age:25},{name:野比大雄,age:12},{name:...
在第二篇,為什麼選擇選擇Angular的文章提到,Angular的其中之一個優點是高度模組化,可以像樂高一樣,高度與其他元件結合與抽離。而高度模組化的訣竅在於,每一個元件都是一個獨立的個體,可以決定有什麼元件的資料可以輸入:同樣地,也可以決定有什麼元件的資料或方法可以輸出。
如何設計元件的輸入與輸出,將會影響到元件的模組化的實用性與可維護性,因此本篇將要來探討如何設計元件的輸入與輸出。
本篇的教學例子還是使用英雄的例子為例繼續:
heros = [ { name: ‘兩津勘吉, age: 35 }, { name: 秋本麗子, age: 25 }, { name: 野比大雄, age: 12 }, { name: 江戶川柯南, age: 8 } ];在先前的例子當中,都將所有的內容寫在app.component之中
這個頁面可以分為兩個部分,一個是輸入英雄資料、加入英雄的部分,如上圖圖片紅色線條框起來的部分;另外一個部分是下方顯示英雄的部分。現在要將紅色框起來的部分,也就是輸入英雄、加入英雄的部分獨立出來到新的元件,我們稱這個元件為hero component
PS:還記得如何產生元件嗎?
ng generate component hero再來將加入英雄部分的html程式碼貼到hero.component.html上面為了方便辨識,將原本的newHero的物件,更名為inputDefaultHerohero.component.html
<p>加入新的英雄:</p> 姓名:<input type="text" [(ngModel)]=inputDefaultHero.name> 年齡:<input type="text" [(ngModel)]=inputDefaultHero.age> <button (click)="addHero()">加入英雄</button>最後將hero component放在app ...