歡迎來到天天文庫
瀏覽記錄
ID：30775464
大小：83.67 KB
頁數(shù)：5頁
時間：2019-01-03
《angular2初級篇之主從結(jié)構(gòu)》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、1.2.3.4.5.6.Angular2初級篇之主從結(jié)構(gòu)先看一下目錄結(jié)構(gòu)：angular-tour?of?heroesappapp?component2、r;3.name:string;4?}[html]viewplaincopy{id:11,name:■Mr.Nice1},{id:12}name:'Narco'},{id:13^name:'Bombasto'}，{id:14，name:*Celeritas'}，{id:15,name:fMagneta*}，{id:16^name:'RubberMan'}，constHEROES:Hero[]=[//英雄數(shù)組8.{id:17name:'Dynama1}，9.{id:18,name:'DrIQ*},10.{id:19name:'Magma'},13、1.{id:20,name:'Tornado'}12.];以上代碼放到import代碼后面.2、修改app.component.ts來暴露英雄數(shù)組，以便進(jìn)行綁定:[html]viewplaincopy1.exportclassAppComponent{2.title=“英雄之旅“；3.heroes=HEROES;//賦值給heros并把heros暴露出來以便綁定4?}3、綁定heros到界面上：1)修改app.component.ts[html]viewplaincopy1.@Component({2.moduleld:module.id,34、?selector:'my-app',4.templatellrl:'app.component?html1‘5?styleUrls:[1../assets/css/app.comporient?css‘]6.})2)、創(chuàng)建app.component.html并修改[html]viewplaincopy1.英雄列表2.3?{{hero.id}}{{hero.name}}2.
2、r;3.name:string;4?}[html]viewplaincopy{id:11,name:■Mr.Nice1},{id:12}name:'Narco'},{id:13^name:'Bombasto'}，{id:14，name:*Celeritas'}，{id:15,name:fMagneta*}，{id:16^name:'RubberMan'}，constHEROES:Hero[]=[//英雄數(shù)組8.{id:17name:'Dynama1}，9.{id:18,name:'DrIQ*},10.{id:19name:'Magma'},1
3、1.{id:20,name:'Tornado'}12.];以上代碼放到import代碼后面.2、修改app.component.ts來暴露英雄數(shù)組，以便進(jìn)行綁定:[html]viewplaincopy1.exportclassAppComponent{2.title=“英雄之旅“；3.heroes=HEROES;//賦值給heros并把heros暴露出來以便綁定4?}3、綁定heros到界面上：1)修改app.component.ts[html]viewplaincopy1.@Component({2.moduleld:module.id,3
4、?selector:'my-app',4.templatellrl:'app.component?html1‘5?styleUrls:[1../assets/css/app.comporient?css‘]6.})2)、創(chuàng)建app.component.html并修改[html]viewplaincopy1.
5、3.4、創(chuàng)建點(diǎn)擊列表點(diǎn)擊事件并綁定到界面上：1）、修改app.component.ts下AppCompone建立自定義變量和點(diǎn)擊事件:[html]viewplaincopy1-selectedHero:Hero;//自定義變量-英雄2.onSelect(hero:Hero):void{//點(diǎn)擊事件3?this.selectedHero=hero;4?}2)、修改app.component.html[html]viewplaincopy1.6、t(hero)">2.{{hero.id}}{{hero.name}}3.事件綁定詳解COPYCODE(click)="onSelect:(hero)?'圓括號標(biāo)識vli＞元素上的click事件是綁走的目標(biāo)。等號右邊的表達(dá)式調(diào)用AppComponent的onSelect()方法并把模板輸入變量hero作為參數(shù)傳進(jìn)去。它是我們前面在ngFor中定義的那個hero變量。5、綁走選中的英雄到界面上:[html]viewplaincopy1.7、">2.{{selectedHero.name}}詳情3.id:{{selectedHero.id}}
6、t(hero)">2.{{hero.id}}{{hero.name}}3.事件綁定詳解COPYCODE(click)="onSelect:(hero)?'圓括號標(biāo)識vli＞元素上的click事件是綁走的目標(biāo)。等號右邊的表達(dá)式調(diào)用AppComponent的onSelect()方法并把模板輸入變量hero作為參數(shù)傳進(jìn)去。它是我們前面在ngFor中定義的那個hero變量。5、綁走選中的英雄到界面上:[html]viewplaincopy1.7、">2.{{selectedHero.name}}詳情3.id:{{selectedHero.id}}
7、">2.
8、.[class.selected]="hero===selectedHero"3.(click)=HonSelect(hero)">4.
此文檔下載收益歸作者所有
