1. 类装饰器
1. @Component({...})
声明一个类是组件，并提供该组件的元数据
2. @Directive({...})
声明一个类是指令，并提供该指令的元数据
3. Pipe({...})
声明以后让类是管道，并提供该管道的元数据
4. Injectable()
声明某个类具有一些依赖。当依赖注入器要创建这个类的实例时，应该把这些依赖注入到他的构造函数中。
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. 给指令和组件的类属性配置项
import { Input, ... } from '@angular/core';
1. @Input() myProperty;
声明一个输入属性，你可以通过属性绑定来更新它
e.g.
<my-cmp [myProperty]="someExpression">
2. @Output() myEvent = new EventEmitter();
声明一个属性，它发出事件，你可以用事件绑定来订阅它们
e.g.
<my-cmp [myEvent]="doSomething()">
3. HostBing('class.valid') isValid;
把宿主元素的一个属性（这里是css类valid），绑定到指令或组件上的isValid 属性
4. @ViewChild(myPredicate) myChildComponent;
把组件视图查询（myPredicate）的第一个结果绑定到该类的 myChildComponent属性上。对指令无效。
3. 指令与组件的变更检测与生命周期钩子
1. constructor(myService: MyService, ...) { ... }
在任何其它生命周期钩子之前调用。可以用它来注入依赖项，但不要在这里做正事。
2. ngOnChanges(changeRecord) { ... }
每当输入属性发生变化时就会调用，但位于处理内容（ng-content）或子视图之前。
3. ngOnInit() { ... }
在调用完构造函数、初始化完所有输入属性并首次调用过ngOnChanges之后调用。
4. ngDoCheck() { ... }
每当对组件或指令的输入属性进行变更检测时就会调用。可以用它来扩展变更检测逻辑，执行自定义的检测逻辑。
5. ngOnDestroy() { ... }
只在实例被销毁前调用一次。
4. 路由与导航
import { Routes, RouterModule,... } from '@angular/router';
1. 创建 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.
为应用配置路由。支持静态、参数化、重定向和通配符号路由。也支持自定义路由数据和解析函数。
2. <router-outlet></router-outlet>
标记出一个位置，用来加载活动路由的组件。
<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.
使用路由体系创建一个到其它视图的链接。
路由体系由路由路径、必要参数、可选参数、查询参数和文档片段组成。
要导航到根路由，请使用/前缀；
要导航到子路由，使用./前缀；
要导航到兄弟路由或父级路由，使用../前缀。
<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] }
用来定义类的接口。路由器会首先调用本接口来决定是否激活该路由。应该返回一个 `boolean|UrlTree` 或能解析成 `boolean|UrlTree` 的 `Observable/Promise`。
class CanDeactivateGuard implements CanDeactivate<T> {***}
用来定义类的接口。路由器会在导航离开前首先调用本接口以决定是否取消激活本路由
class CanActivateChildGuard implements CanActivateChild{***}
用来定义类的接口。路由器会首先调用本接口以决定是否激活一个子路由
class ResolveGuard implements Resolve<T>{***}
用来定义类的接口。路由器会在渲染该路由之前，首先调用本接口来解析路由数据。
class CanLoadGuard implements CanLoad{***}
用来定义类的接口。路由器会首先调用本接口来决定是否应该加载一个惰性加载模块。
网友评论