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)該加載一個惰性加載模塊倒谷。