AngularforTypeScript语法快速指南(基于2.0.0版本)

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

引导	`import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';`
`platformBrowserDynamic().bootstrapModule(AppModule);`	使用JIT编译器引导一个AppModule模块定义的应用

NgModules	`import { NgModule } from '@angular/core';`
`@NgModule({ declarations: ..., imports: ..., exports: ..., providers: ..., bootstrap: ...}) class MyModule {}`	定义一个模块，其中包括组件、指令、管道和提供商。
`declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]`	一个数组，包括从属于当前模块的组件、指令和管道。
`imports: [BrowserModule, SomeOtherModule]`	一个数组，包括被导入到当前模块中的所有模块。来自被导入模块的`declarations`也同样对当前模块有效。
`exports: [MyRedComponent, MyDatePipe]`	一个数组，包括对导入当前模块的模块可见的组件、指令、管道。
`providers: [MyService, { provide: ... }]`	一个数组，包括在对前模块及导入当前模块的模块中的内容物（组件、指令、管道、提供商等）可见的依赖注入提供商。
`bootstrap: [MyAppComponent]`	一个数组，包括由当前模块引导时应该引导的组件

模板语法
`<input [value]="firstName">`	把属性`value`绑定到表达式`firstName`的结果。
`<div [attr.role]="myAriaRole">`	把`role`这个Attribute绑定到表达式 `myAriaRole`的结果。
`<div [class.extra-sparkle]="isDelightful">`	把元素是否出现CSS类`extra-sparkle`，绑定到一个表达式`isDelightful`的结果是否为真。
`<div [style.width.px]="mySize">`	把样式的`width`属性绑定到表达式`mySize`的结果，以px为单位。这个单位是可选的。
`<button (click)="readRainbow($event)">`	当按钮(及其子元素)上的click事件被触发时，调用`readRainbow`方法，并把事件对象作为参数传入。
`<div title="Hello {{ponyName}}">`	把属性绑定到一个插值表达式字符串，比如 "Hello Seabiscuit"。它等价于： `<div [title]="'Hello ' + ponyName">`
`<p>Hello {{ponyName}}</p>`	把文本内容绑定到一个插值表达式，比如 "Hello Seabiscuit".
`<my-cmp [(title)]="name">`	设置双向数据绑定。等价于：`<my-cmp [title]="name" (titleChange)="name=$event">`
`<video #movieplayer ...> <button (click)="movieplayer.play()"> </video>`	创建一个局部变量 `movieplayer` ，它提供到`video`元素实例的访问，可用于当前模板中的数据绑定和事件绑定表达式中。
`<p *myUnless="myExpression">...</p>`	`*`符号表示当前元素将被转变成一个内嵌模板。等价于： `<template [myUnless]="myExpression"><p>...</p></template>`
`<p>Card No.: {{cardNumber \| myCardNumberFormatter}}</p>`	通过名叫`myCardNumberFormatter`的管道，转换表达式的当前值`cardNumber`。
`<p>Employer: {{employer?.companyName}}</p>`	安全导航运算符(`?.`)表示`employer`字段是可选的，如果它是`undefined`，表达式剩下的部分将被忽略
`<svg:rect x="0" y="0" width="100" height="100"/>`	SVG模板需要在它们的根节点上带一个`svg:`前缀，以消除模板中HTML元素和SVG元素的歧义。
`<svg> <rect x="0" y="0" width="100" height="100"/> </svg>`	`<svg>`元素在无需前缀的情况下，也能被自动检测为SVG。

内置指令	`import { CommonModule } from '@angular/common';`
`<section *ngIf="showSection">`	基于showSection表达式的值移除或重新创建部分DOM树。
`<li *ngFor="let item of list">`	把li元素及其内容转化成一个模板，并用它来为列表中的每个条目初始化视图。
`<div [ngSwitch]="conditionExpression"> <template [ngSwitchCase]="case1Exp">...</template> <template ngSwitchCase="case2LiteralString">...</template> <template ngSwitchDefault>...</template> </div>`	基于conditionExpression的当前值，从内嵌模板中选取一个，有条件的切换div的内容。
`<div [ngClass]="{active: isActive, disabled: isDisabled}">`	把一个元素上CSS类的出现与否，绑定到一个真值映射表上。右侧的表达式应该返回类似{class-name: true/false}的映射表。

表单	`import { FormsModule } from '@angular/forms';`
`<input [(ngModel)]="userName">`	提供双向绑定，为表单控件提供解析和验证。

类装饰器	`import { Directive, ... } from '@angular/core';`
`@Component({...}) class MyComponent() {}`	声明当前类是一个组件，并提供关于该组件的元数据。
`@Directive({...}) class MyDirective() {}`	声明当前类是一个指令，并提供关于该指令的元数据。
`@Pipe({...}) class MyPipe() {}`	声明当前类是一个管道，并且提供关于该管道的元数据。
`@Injectable() class MyService() {}`	声明当前类有一些依赖，当依赖注入器创建该类的实例时，这些依赖应该被注入到构造函数中。

指令配置

@Directive({ property1: value1, ... })

selector: '.cool-button:not(a)'

指定一个CSS选择器，以便在模板中找出该指令。支持的选择器包括element, [attribute], .class, 和 :not()。

不支持父子关系选择器。

providers: [MyService, { provide: ... }]

为当前指令及其子指令提供依赖注入的providers数组。

组件配置	`@Component`扩展了`@Directive`, 以便`@Directive`中的配置项也能用在组件上
`moduleId: module.id`	如果设置了，`templateUrl`和`styleUrl`会被解析成相对于组件的。
`viewProviders: [MyService, { provide: ... }]`	依赖注入provider的数组，局限于当前组件的视图中。
`template: 'Hello {{name}}' templateUrl: 'my-component.html'`	当前组件视图的内联模板或外部模板地址
`styles: ['.primary {color: red}'] styleUrls: ['my-component.css']`	内联CSS样式或外部样式表URL的列表，用于给组件的视图添加样式。

供指令类或组件类用的字段装饰器。	`import { Input, ... } from '@angular/core';`
`@Input() myProperty;`	声明一个输入属性，以便我们可以通过属性绑定更新它。(比如：`<my-cmp [my-property]="someExpression">`).
`@Output() myEvent = new EventEmitter();`	声明一个输出属性，以便我们可以通过事件绑定进行订阅。(比如：`<my-cmp (my-event)="doSomething()">`).
`@HostBinding('[class.valid]') isValid;`	把宿主元素的属性(比如CSS类：valid)绑定到指令/组件的属性(比如：isValid)。
`@HostListener('click', ['$event']) onClick(e) {...}`	通过指令/组件的方法(例如onClick)订阅宿主元素的事件(例如click)，可选传入一个参数($event)。
`@ContentChild(myPredicate) myChildComponent;`	把组件内容查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。
`@ContentChildren(myPredicate) myChildComponents;`	把组件内容查询(myPredicate)的全部结果，绑定到类的myChildComponents属性。
`@ViewChild(myPredicate) myChildComponent;`	把组件视图查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。对指令无效。
`@ViewChildren(myPredicate) myChildComponents;`	把组件视图查询(myPredicate)的全部结果绑定到类的myChildComponents属性。对指令无效。

指令和组件的变更检测与生命周期钩子	(作为类方法实现)
`constructor(myService: MyService, ...) { ... }`	类的构造函数会在所有其它生命周期钩子之前调用。使用它来注入依赖，但是要避免用它做较重的工作。
`ngOnChanges(changeRecord) { ... }`	在输入属性每次变化了之后、开始处理内容或子视图之前被调用。
`ngOnInit() { ... }`	在执行构造函数、初始化输入属性、第一次调用完ngOnChanges之后调用。
`ngDoCheck() { ... }`	每当检查组件或指令的输入属性是否变化时调用。通过它，可以用自定义的检查方式来扩展变更检测逻辑。
`ngAfterContentInit() { ... }`	当组件或指令的内容已经初始化、ngOnInit完成之后调用。
`ngAfterContentChecked() { ... }`	在每次检查完组件或指令的内容之后调用。
`ngAfterViewInit() { ... }`	当组件的视图已经初始化完毕，每次ngAfterContentInit之后被调用。只适用于组件。
`ngAfterViewChecked() { ... }`	每次检查完组件的视图之后调用。只适用于组件。
`ngOnDestroy() { ... }`	在所属实例被销毁前，只调用一次。