关于双向绑定
@NgModule({ declarations: ..., imports: ..., | 定义一个模块,其中可以包含组件、指令、管道和服务提供商。 |
declarations: [MyRedComponent, MyBlueComponent, MyDatePipe] | 属于当前模块的组件、指令和管道的列表。 |
imports: [BrowserModule, SomeOtherModule] | 本模块所导入的模块列表 |
exports: [MyRedComponent, MyDatePipe] | 那些导入了本模块的模块所能看到的组件、指令和管道的列表 |
providers: [MyService, { provide: ... }] | 依赖注入提供商的列表,本模块以及本模块导入的所有模块中的内容都可以看见它们。 |
bootstrap: [MyAppComponent] | 当本模块启动时,随之启动的组件列表。 |
模板语法 | |
---|---|
<input [value]="firstName"> | 把 |
<div [attr.role]="myAriaRole"> | 把属性(Attribute) |
<div [class.extra-sparkle]="isDelightful"> | 根据 |
<div [style.width.px]="mySize"> | 把CSS样式属性 |
<button (click)="readRainbow($event)"> | 当这个按钮元素(及其子元素)上的click事件触发时,调用方法 |
<div title="Hello {{ponyName}}"> | 把一个属性绑定到插值字符串(如"Hello Seabiscuit")。这种写法等价于 |
<p>Hello {{ponyName}}</p> | 把文本内容绑定到插值字符串(如"Hello Seabiscuit") |
<my-cmp [(title)]="name"> | 设置双向绑定。等价于 |
<video #movieplayer ...> | 创建一个局部变量 |
<p *myUnless="myExpression">...</p> | 星号 |
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p> | 使用名叫 |
<p>Employer: {{employer?.companyName}}</p> | 安全导航操作符( |
<svg:rect x="0" y="0" width="100" height="100"/> | 模板中的 SVG 片段需要给它的根元素加上 |
<svg> | 以 |
内置指令 | |
---|---|
<section *ngIf="showSection"> | 根据 |
<li *ngFor="let item of list"> | 把li元素及其内容变成一个模板,并使用这个模板为列表中的每一个条目实例化一个视图。 |
<div [ngSwitch]="conditionExpression"> | 根据 |
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}"> | 根据 map 中的 value 是否为真,来决定该元素上是否出现与 name 对应的 CSS 类。右侧的表达式应该返回一个形如 |
表单 | |
---|---|
<input [(ngModel)]="userName"> | 为表单控件提供双向数据绑定、解析和验证功能。 |
类装饰器(decorator) | |
---|---|
@Component({...}) | 声明一个类是组件,并提供该组件的元数据。 |
@Directive({...}) | 声明一个类是指令,并提供该指令的元数据。 |
@Pipe({...}) | 声明一个类是管道,并提供该管道的元数据。 |
@Injectable() | 声明一个类具有一些依赖,当依赖注入器试图创建该类的实例时,应该把这些依赖注入到该类的构造函数中。 |
组件配置 | |
---|---|
moduleId: module.id | 如果设置了,那么 |
viewProviders: [MyService, { provide: ... }] | 依赖注入提供商列表,但它们的范围被限定为当前组件的视图。 |
template: 'Hello {{name}}' | 当前组件视图的内联模板或外部模板的 URL 。 |
styles: ['.primary {color: red}'] | 用于为当前组件的视图提供样式的内联 CSS 或外部样式表 URL 的列表。 |
给指令或组件类用的属性装饰器 | |
---|---|
@Input() myProperty; | 声明一个输入属性,你可以通过属性绑定来更新它,如 |
@Output() myEvent = new EventEmitter(); | 声明一个输出属性,它发出事件,你可以用事件绑定来订阅它们(如: |
@HostBinding('class.valid') isValid; | 把宿主元素的一个属性(这里是 CSS 类 |
@HostListener('click', ['$event']) onClick(e) {...} | 用指令或组件上的 |
@ContentChild(myPredicate) myChildComponent; | 把组件内容查询( |
@ContentChildren(myPredicate) myChildComponents; | 把组件内容查询( |
@ViewChild(myPredicate) myChildComponent; | 把组件视图查询( |
@ViewChildren(myPredicate) myChildComponents; | 把组件视图查询( |
指令和组件的变更检测与生命周期钩子 | 由类的方法实现。 |
---|---|
constructor(myService: MyService, ...) { ... } | 在任何其它生命周期钩子之前调用。可以用它来注入依赖项,但不要在这里做正事。 |
ngOnChanges(changeRecord) { ... } | 每当输入属性发生变化时就会调用,但位于处理内容( |
ngOnInit() { ... } | 在调用完构造函数、初始化完所有输入属性并首次调用过 |
ngDoCheck() { ... } | 每当对组件或指令的输入属性进行变更检测时就会调用。可以用它来扩展变更检测逻辑,执行自定义的检测逻辑。 |
ngAfterContentInit() { ... } | |
ngAfterContentChecked() { ... } | 每当组件或指令的内容( |
ngAfterViewInit() { ... } | 当 |
ngAfterViewChecked() { ... } | 当组件视图每次执行变更检测时调用。只适用于组件。 |
ngOnDestroy() { ... } | 只在实例被销毁前调用一次。 |
依赖注入的配置 | |
---|---|
{ provide: MyService, useClass: MyMockService } | 把 |
{ provide: MyService, useFactory: myFactory } | 把 |
{ provide: MyValue, useValue: 41 } | 把 |
路由与导航 | |
---|---|
const routes: Routes = [ | 为该应用配置路由。支持静态、参数化、重定向和通配符路由。也支持自定义路由数据和解析(resolve)函数。 |
| 标记出一个位置,用来加载活动路由的组件。 |
| 使用路由体系创建一个到其它视图的链接。路由体系由路由路径、必要参数、可选参数、查询参数和文档片段组成。要导航到根路由,请使用 |
<a [routerLink]="[ '/path' ]" routerLinkActive="active"> | 当 |
class CanActivateGuard implements CanActivate { | 用来定义类的接口。路由器会首先调用本接口来决定是否激活该路由。应该返回一个 |
class CanDeactivateGuard implements CanDeactivate<T> { | 用来定义类的接口。路由器会在导航离开前首先调用本接口以决定是否取消激活本路由。应该返回一个 |
class CanActivateChildGuard implements CanActivateChild { | 用来定义类的接口。路由器会首先调用本接口来决定是否激活一个子路由。应该返回一个 |
class ResolveGuard implements Resolve<T> { | 用来定义类的接口。路由器会在渲染该路由之前,首先调用它来解析路由数据。应该返回一个值或能解析成值的 |
class CanLoadGuard implements CanLoad { | 用来定义类的接口。路由器会首先调用它来决定是否应该加载一个惰性加载模块。应该返回一个 |