-
元數(shù)據(jù)
selector參數(shù):CSS標(biāo)簽選擇器
template參數(shù):用于定義組件的模板,一個組件只能使用一個模板.
*如果使用外部模板則通過URL的形式進(jìn)行引入.
自定義模板則涉及數(shù)據(jù)綁定的概念.
數(shù)據(jù)綁定方式
1.插值(適用于自身模板與組件類中的數(shù)據(jù)綁定)?
直接使用組件類中的屬性.
templage: <p>{{屬性名}}</p>
2.屬性綁定(適用于父組件的模板往子組件類中數(shù)據(jù)的綁定)
<ele [子組件屬性名]="data">
3.事件綁定(適用于子組件的模板往父組件類中數(shù)據(jù)的綁定)
把子組件的模板里產(chǎn)生的數(shù)據(jù)通過函數(shù)調(diào)用的方式傳遞到父組件類中.
<input (keyup) = "handle($event)">
*當(dāng)keyup事件觸發(fā)時則調(diào)用組件實例中的handle方法.
4.雙向綁定
實現(xiàn)數(shù)據(jù)的雙向流動
<input [(ngModel)] = "屬性名">
查看全部 -
Angular的組件由Component裝飾器以及組件類組成.
組件的業(yè)務(wù)邏輯都是在組件類中進(jìn)行編寫.
組件=Component裝飾器+組件類
裝飾器的語法
@裝飾器名({參數(shù)名:參數(shù)值})
*裝飾器中的元素叫做元數(shù)據(jù)
組件類的語法
export class 組件類名{
private 屬性名: 屬性類型
//構(gòu)造器
constructor(){
? ? ? ? ?this.屬性名 = 'Hello World';
}
}
*裝飾器的作用是將元數(shù)據(jù)注入到組件類中.
當(dāng)定義了組件類后,Augular并不知道怎么解析這個類,如果在類中使用裝飾器進(jìn)行修飾,那么裝飾器就會在運行的時候把其元數(shù)據(jù)中的參數(shù)注入到組件類中,此時Angular就能識別出組件類.
查看全部 -
組件的生命周期
Constructor(構(gòu)造器):用于對組件中的元素進(jìn)行初始化操作--》第一次OnChanges事件被觸發(fā)(用于接收父組件傳入的數(shù)據(jù))--》組件初始化階段--》運行間OnChanges事件被觸發(fā)--》組件銷毀時觸發(fā)OnDestroy
*只要組件的輸入數(shù)據(jù)發(fā)生變化既會觸發(fā)一次OnChange事件.
查看全部 -
組件與組件之間通過樹形結(jié)構(gòu)進(jìn)行關(guān)聯(lián),每個組件都能設(shè)置輸入和輸出屬性來構(gòu)造關(guān)系,負(fù)責(zé)與上下游的組件進(jìn)行交互.
查看全部 -
頁面由不同的組件渲染組成,每個組件都有自己的JavaScript邏輯、html元素、css樣式,每個組件都能完成各自的功能.
查看全部 -
文件模塊使用
查看全部 -
文件模塊Module
查看全部 -
自定義指令
查看全部 -
數(shù)據(jù)綁定方式
查看全部 -
模板 template
查看全部 -
插值interpolation
查看全部 -
父子組件通訊
（1）通訊前提：定義輸入屬性
（2）首先接收數(shù)據(jù)則導(dǎo)入Input裝飾器，發(fā)送數(shù)據(jù)則導(dǎo)入Output，EventEmitter
（3）使用Input裝飾器
@Input() private message : string;
發(fā)送端設(shè)置：[message]="msgToChild"
（4）使用Output裝飾器
聲明：@Output() private outer = new EventEmitter<string>();
發(fā)送數(shù)據(jù)：outer.emit('something');
接收端接收代碼:(outer="receive($event)")
查看全部 -
服務(wù)使用
（1）建立xxx.service.ts
（2）在模塊（app.module.ts）中引入，同時在providers中注入依賴（引入服務(wù)）
（3）在組件導(dǎo)入服務(wù)類
查看全部 -
自定義指令使用
（1）建立xxx.directive.ts文件，在@Directive下的selector中聲明標(biāo)簽名。
（2）通過導(dǎo)入ElementRef、Renderer輔助元素的渲染
?constructor(el : ElementRef, render : Renderer){
?render.setElementStyle(el.nativeElement, 'backgroundColor','yellow');
}
（3）在模塊中引入指令，同時在declarations中引入指令。
（4）在組件中通過標(biāo)簽名引用自定義指令
查看全部 -
（1）tsconfig.json :typeScript編譯器的配置文件
（2）代碼放在app目錄下
（3）組件文件xxx.component.ts
（4）selector聲明標(biāo)簽名，templateUrl聲明外鏈模版文件
（5）模塊文件xxx.module.ts
（6）模塊文件中在declarations，bootstrap將【組件】定義到模塊里
（7）啟動文件main.ts,將聲明的模塊導(dǎo)入到這個文件，通過platformBrowserDynamic()動態(tài)引導(dǎo)啟動，最后在這里導(dǎo)入依賴庫
reflect-metadata(動態(tài)引導(dǎo))，zone.js(瀏覽器異步事件)
（8）在webpack.config.js聲明上述的啟動文件的路徑，在index.html通過script引入webpack.config.js打包出來的bundle.js（<script src="./bundle.js"></script>）
(9)在index.html中使用根組件my-app
查看全部
舉報