4. Angular 速查表2--- 類裝飾器屑宠,類屬性厢洞,變更檢測與生命周期鉤子,路由與導(dǎo)航

1. 類裝飾器

1. @Component({...})

聲明一個類是組件典奉,并提供該組件的元數(shù)據(jù)

2. @Directive({...})

聲明一個類是指令躺翻,并提供該指令的元數(shù)據(jù)

3. Pipe({...})

聲明以后讓類是管道,并提供該管道的元數(shù)據(jù)

4. Injectable()

聲明某個類具有一些依賴卫玖。當(dāng)依賴注入器要創(chuàng)建這個類的實(shí)例時获枝,應(yīng)該把這些依賴注入到他的構(gòu)造函數(shù)中。
Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class

2. 給指令和組件的類屬性配置項(xiàng)

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

1. @Input() myProperty;

聲明一個輸入屬性骇笔,你可以通過屬性綁定來更新它
e.g.
<my-cmp [myProperty]="someExpression">

2. @Output() myEvent = new EventEmitter();

聲明一個屬性,它發(fā)出事件嚣崭,你可以用事件綁定來訂閱它們
e.g.
<my-cmp [myEvent]="doSomething()">

3. HostBing('class.valid') isValid;

把宿主元素的一個屬性(這里是css類valid)笨触,綁定到指令或組件上的isValid 屬性

4. @ViewChild(myPredicate) myChildComponent;

把組件視圖查詢(myPredicate)的第一個結(jié)果綁定到該類的 myChildComponent屬性上。對指令無效雹舀。

3. 指令與組件的變更檢測與生命周期鉤子

1. constructor(myService: MyService, ...) { ... }

在任何其它生命周期鉤子之前調(diào)用芦劣。可以用它來注入依賴項(xiàng)说榆,但不要在這里做正事虚吟。

2. ngOnChanges(changeRecord) { ... }

每當(dāng)輸入屬性發(fā)生變化時就會調(diào)用,但位于處理內(nèi)容(ng-content)或子視圖之前签财。

3. ngOnInit() { ... }

在調(diào)用完構(gòu)造函數(shù)串慰、初始化完所有輸入屬性并首次調(diào)用過ngOnChanges之后調(diào)用。

4. ngDoCheck() { ... }

每當(dāng)對組件或指令的輸入屬性進(jìn)行變更檢測時就會調(diào)用唱蒸“铞辏可以用它來擴(kuò)展變更檢測邏輯,執(zhí)行自定義的檢測邏輯神汹。

5. ngOnDestroy() { ... }

只在實(shí)例被銷毀前調(diào)用一次。

4. 路由與導(dǎo)航

import { Routes, RouterModule,... } from '@angular/router';

1. 創(chuàng)建 routes 變量
const routes: Routes = [
{path: ' ',  component: HomeComponent},
{path: 'path/:routeParam',  component: MyComponent},
{path: '****', component:  ***},
{path: 'oldPath', redirectTo: '/staticPath'},
{path:  ... , component:    ... , data: {message: 'Custom'}}, 
]
const routing = RouterModule.forRoot(routes)

Configure routes for the application. Supports static , parameterized , redirect, and wildcard routes . Also supports custom route data and resolve.
為應(yīng)用配置路由屁魏。支持靜態(tài)、參數(shù)化氓拼、重定向和通配符號路由抵碟。也支持自定義路由數(shù)據(jù)和解析函數(shù)。

2. <router-outlet></router-outlet>

標(biāo)記出一個位置撬即,用來加載活動路由的組件立磁。

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>
3. <a [routerLink]="['/path', routeParam]">

Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters , and a fragment.
To navigate to a root route, use the /prefix;
for a child route , use the ./prefix;
for a sibling or parent, use the ../ prefix.
使用路由體系創(chuàng)建一個到其它視圖的鏈接。
路由體系由路由路徑剥槐、必要參數(shù)唱歧、可選參數(shù)、查詢參數(shù)和文檔片段組成粒竖。
要導(dǎo)航到根路由颅崩,請使用/前綴;
要導(dǎo)航到子路由蕊苗,使用./前綴沿后;
要導(dǎo)航到兄弟路由或父級路由,使用../前綴朽砰。

<a routerLink="/">
<a routerLink="/path">

<a [routerLink]="['/path', {matriParam: 'value'}]">
<a [routerLink]="['/path']" [queryParams]="{page: 1}">
<a [routerLink]="['/path']" fragment="anchor">
4. <a [routerLink]="[ '/path' ]" [routerLinkActive]="active">

<a[routerLink]="[ '/path' ]" [routerLinkActive]="active">

The provided classes are added to the element when the routerLink becomes the current active route.

5. class CanActivateGuard
class CanActivateGuard implements  CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { ... }
}

{ path: ..., canActivate: [CanActivateGuard] }

用來定義類的接口尖滚。路由器會首先調(diào)用本接口來決定是否激活該路由。應(yīng)該返回一個 `boolean|UrlTree` 或能解析成 `boolean|UrlTree` 的 `Observable/Promise`瞧柔。
class CanDeactivateGuard implements CanDeactivate<T> {***}
用來定義類的接口漆弄。路由器會在導(dǎo)航離開前首先調(diào)用本接口以決定是否取消激活本路由

class CanActivateChildGuard implements CanActivateChild{***}
用來定義類的接口。路由器會首先調(diào)用本接口以決定是否激活一個子路由
class ResolveGuard implements Resolve<T>{***}
用來定義類的接口造锅。路由器會在渲染該路由之前撼唾,首先調(diào)用本接口來解析路由數(shù)據(jù)。
class CanLoadGuard implements CanLoad{***}
用來定義類的接口哥蔚。路由器會首先調(diào)用本接口來決定是否應(yīng)該加載一個惰性加載模塊倒谷。



?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市糙箍,隨后出現(xiàn)的幾起案子渤愁,更是在濱河造成了極大的恐慌,老刑警劉巖深夯,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件猴伶,死亡現(xiàn)場離奇詭異,居然都是意外死亡塌西,警方通過查閱死者的電腦和手機(jī)他挎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來捡需,“玉大人办桨,你說我怎么就攤上這事≌净裕” “怎么了呢撞?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵损姜,是天一觀的道長。 經(jīng)常有香客問我殊霞,道長摧阅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任棒卷,我火速辦了婚禮比规,結(jié)果婚禮上拦英,老公的妹妹穿的比我還像新娘。我一直安慰自己灾常,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布钞瀑。 她就那樣靜靜地躺著锚贱,像睡著了一般拧廊。 火紅的嫁衣襯著肌膚如雪晋修。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天倦春,我揣著相機(jī)與錄音落剪,去河邊找鬼忠怖。 笑死,一個胖子當(dāng)著我的面吹牛凡泣,可吹牛的內(nèi)容都是我干的皮假。 我是一名探鬼主播惹资,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼褪测,長吁一口氣:“原來是場噩夢啊……” “哼来颤!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起萝毛,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤笆包,失蹤者是張志新(化名)和其女友劉穎略荡,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體巴粪,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡肛根,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年派哲,在試婚紗的時候發(fā)現(xiàn)自己被綠了掺喻。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡褂乍,死狀恐怖树叽,靈堂內(nèi)的尸體忽然破棺而出谦絮,到底是詐尸還是另有隱情洁仗,我是刑警寧澤赠潦,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布她奥,位于F島的核電站,受9級特大地震影響哩俭,放射性物質(zhì)發(fā)生泄漏凡资。R本人自食惡果不足惜谬运,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望伞访。 院中可真熱鬧厚掷,春花似錦、人聲如沸冒黑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至腊状,卻和暖如春苔可,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背映屋。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留早处,地道東北人砌梆。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓咸包,卻偏偏與公主長得像,于是被迫代替她去往敵國和親烂瘫。 傳聞我的和親對象是個殘疾皇子忱反,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內(nèi)容