Angular2语法快速指南

原文

Angular for TypeScript 语法快速指南 (基于2.0.0版本)


引导

import { platformbrowserDynamic } from '@angular/platform-browser-dynamic';
platformbrowserDynamic().bootstrapModule(AppModule);

使用JIT编译器引导一个AppModule模块定义的应用
NgModules exports:[MyRedComponent,MyDatePipe] bootstrap:[MyAppComponent]

import { NgModule } from '@angular/core';
@NgModule({declarations:...,imports:...,
exports:...,providers:...,bootstrap:...})
classMyModule{}

定义一个模块，其中包括组件、指令、管道和提供商。
declarations:[MyRedComponent,MyBlueComponent,MyDatePipe]

一个数组，包括从属于当前模块的组件、指令和管道。
imports:[browserModule,SomeOtherModule]

一个数组，包括被导入到当前模块中的所有模块。来自被导入模块的declarations也同样对当前模块有效。

一个数组，包括对导入当前模块的模块可见的组件、指令、管道。
providers:[MyService,{provide:...}]

一个数组，包括在对前模块及导入当前模块的模块中的内容物（组件、指令、管道、提供商等）可见的依赖注入提供商。

一个数组，包括由当前模块引导时应该引导的组件
模板语法 <div[style.width.px]="mySize"> <divtitle="Hello{{ponyName}}"> <my-cmp[(title)]="name"> <p*myUnless="myExpression">...</p> <p>Employer:{{employer?.companyName}}</p> <svg>
<rectx="0"y="0"width="100"height="100"/>
</svg>
<input[value]="firstName">

把属性value绑定到表达式firstName的结果。
<div[attr.role]="myAriaRole">

把role这个Attribute绑定到表达式myAriaRole的结果。
<div[class.extra-sparkle]="isDelightful">

把元素是否出现CSS类extra-sparkle，绑定到一个表达式isDelightful的结果是否为真。

把样式的width属性绑定到表达式mySize的结果，以px为单位。这个单位是可选的。
<button(click)="readRainbow($event)">

当按钮(及其子元素)上的click事件被触发时，调用readRainbow方法，并把事件对象作为参数传入。

把属性绑定到一个插值表达式字符串，比如 "Hello Seabiscuit"。它等价于：<div [title]="'Hello ' + ponyName">
<p>Hello{{ponyName}}</p>

把文本内容绑定到一个插值表达式，比如 "Hello Seabiscuit".

设置双向数据绑定。等价于：<my-cmp [title]="name" (titleChange)="name=$event">
<video#movieplayer...>
<button(click)="movieplayer.play()">
</video>

创建一个局部变量movieplayer，它提供到video元素实例的访问，可用于当前模板中的数据绑定和事件绑定表达式中。

*符号表示当前元素将被转变成一个内嵌模板。等价于：<template [myUnless]="myExpression"><p>...</p></template>
<p>CardNo.:{{cardNumber|myCardNumberFormatter}}</p>

通过名叫myCardNumberFormatter的管道，转换表达式的当前值cardNumber。

安全导航运算符(?.)表示employer字段是可选的，如果它是undefined，表达式剩下的部分将被忽略
<svg:rectx="0"y="0"width="100"height="100"/>

SVG模板需要在它们的根节点上带一个svg:前缀，以消除模板中HTML元素和SVG元素的歧义。

<svg>元素在无需前缀的情况下，也能被自动检测为SVG。
内置指令 <div[ngClass]="{active:isActive,disabled:isdisabled}">

import { CommonModule } from '@angular/common';
<section*ngIf="showSection">

基于showSection表达式的值移除或重新创建部分DOM树。
<li*ngFor="letitemoflist">

把li元素及其内容转化成一个模板，并用它来为列表中的每个条目初始化视图。
<div[ngSwitch]="conditionExpression">
<template[ngSwitchCase]="case1Exp">...</template>
<templatengSwitchCase="case2LiteralString">...</template>
<templatengSwitchDefault>...</template>
</div>

基于conditionExpression的当前值，从内嵌模板中选取一个，有条件的切换div的内容。

把一个元素上CSS类的出现与否，绑定到一个真值映射表上。右侧的表达式应该返回类似{class-name: true/false}的映射表。
表单
import { FormsModule } from '@angular/forms';
<input[(ngModel)]="userName">

提供双向绑定，为表单控件提供解析和验证。
类装饰器 @Directive({...})
classMyDirective(){} @Injectable()
classMyService(){}
import { Directive,... } from '@angular/core';
@Component({...})
classMyComponent(){}

声明当前类是一个组件，并提供关于该组件的元数据。

声明当前类是一个指令，并提供关于该指令的元数据。
@Pipe({...})
classMyPipe(){}

声明当前类是一个管道，并且提供关于该管道的元数据。

声明当前类有一些依赖，当依赖注入器创建该类的实例时，这些依赖应该被注入到构造函数中。
指令配置 cope" style="background:rgb(231,{provide:...}]
@Directive({ property1: value1,... })
selector:'.cool-button:not(a)'

指定一个CSS选择器，以便在模板中找出该指令。支持的选择器包括element,[attribute],107); padding:0px 4px; display:inline-block">.class,和:not()。

不支持父子关系选择器。

为当前指令及其子指令提供依赖注入的providers数组。
组件配置 viewProviders:[MyService,{provide:...}] styles:['.primary{color:red}']
styleUrls:['my-component.css']
@Component扩展了@Directive,以便@Directive中的配置项也能用在组件上
moduleId:module.id

如果设置了，templateUrl和styleUrl会被解析成相对于组件的。

依赖注入provider的数组，局限于当前组件的视图中。
template:'Hello{{name}}'
templateUrl:'my-component.html'

当前组件视图的内联模板或外部模板地址

内联CSS样式或外部样式表URL的列表，用于给组件的视图添加样式。
供指令类或组件类用的字段装饰器。 @Output()myEvent=newEventEmitter(); @HostListener('click',['$event'])onClick(e){...} @ContentChildren(myPredicate)myChildComponents; @ViewChildren(myPredicate)myChildComponents;
import { Input,107); padding:0px 4px; display:inline-block">@input()myProperty;

声明一个输入属性，以便我们可以通过属性绑定更新它。(比如：<my-cmp [my-property]="someExpression">).

声明一个输出属性，以便我们可以通过事件绑定进行订阅。(比如：<my-cmp (my-event)="doSomething()">).
@HostBinding('[class.valid]')isValid;

把宿主元素的属性(比如CSS类：valid)绑定到指令/组件的属性(比如：isValid)。

通过指令/组件的方法(例如onClick)订阅宿主元素的事件(例如click)，可选传入一个参数($event)。
@ContentChild(myPredicate)myChildComponent;

把组件内容查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。

把组件内容查询(myPredicate)的全部结果，绑定到类的myChildComponents属性。
@ViewChild(myPredicate)myChildComponent;

把组件视图查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。对指令无效。

把组件视图查询(myPredicate)的全部结果绑定到类的myChildComponents属性。对指令无效。
指令和组件的变更检测与生命周期钩子 ngOnChanges(changeRecord){...} ngDoCheck(){...} ngAfterContentChecked(){...} ngAfterViewChecked(){...}

(作为类方法实现)
constructor(myService:MyService,...){...}

类的构造函数会在所有其它生命周期钩子之前调用。使用它来注入依赖，但是要避免用它做较重的工作。

在输入属性每次变化了之后、开始处理内容或子视图之前被调用。
ngOnInit(){...}

在执行构造函数、初始化输入属性、第一次调用完ngOnChanges之后调用。

每当检查组件或指令的输入属性是否变化时调用。通过它，可以用自定义的检查方式来扩展变更检测逻辑。
ngAfterContentinit(){...}

当组件或指令的内容已经初始化、ngOnInit完成之后调用。

在每次检查完组件或指令的内容之后调用。
ngAfterViewInit(){...}

当组件的视图已经初始化完毕，每次ngAfterContentinit之后被调用。只适用于组件。

每次检查完组件的视图之后调用。只适用于组件。
ngOnDestroy(){...}

在所属实例被销毁前，只调用一次。
依赖注入配置 cope" style="background:rgb(231,useFactory:myFactory}
{provide:MyService,useClass:MyMockService}

把MyService类的提供商设置或改写为MyMockService。

把MyService的提供商设置或改写为myFactory工厂函数。
{provide:MyValue,useValue:41}

把MyValue的提供商设置或改写为值41。
路由与导航 <a[routerLink]="['/path']"routerLinkActive="active"> classCanDeactivateGuardimplementsCanDeactivate<T>{
canDeactivate(
component:T,
route:ActivatedRouteSnapshot,canDeactivate:[CanDeactivateGuard]} classResolveGuardimplementsResolve<T>{
resolve(
route:ActivatedRouteSnapshot,
state:RouterStateSnapshot
):Observable<any>|Promise<any>|any{...}
}

{path:...,resolve:[ResolveGuard]}

import { Routes,RouterModule,... } from '@angular/router';
constroutes:Routes=[
{path:'',component:HomeComponent},
{path:'path/:routeParam',component:MyComponent},
{path:'staticPath',component:...},
{path:'**',
{path:'oldpath',redirectTo:'/staticPath'},
{path:...,component:...,data:{message:'Custom'}}
]);

constrouting=RouterModule.forRoot(routes);

为应用配置路由。支持静态、参数化、重定向和通配符路由。还支持自定义路由数据和解析。

<router-outlet></router-outlet>
<router-outletname="aux"></router-outlet>

标记一个位置，用于加载当前激活路由的组件。

<arouterLink="/path">
<a[routerLink]="['/path',routeParam]">
<a[routerLink]="['/path',{matrixParam:'value'}]">
<a[routerLink]="['/path']"[queryParams]="{page:1}">
<a[routerLink]="['/path']"fragment="anchor">

基于路由指令创建指向不同视图的链接，由路由路径、必选参数、可选参数、查询参数和片段（fragment）组成。添加“/”前缀可以导航到根路由。添加“./”前缀可以导航到子路由。添加“../sibling”前缀可以导航到兄弟路由或父路由。

当routerLink被激活时，就把指定的CSS类添加到该元素上。
classCanActivateGuardimplementsCanActivate{
canActivate(
route:ActivatedRouteSnapshot,
state:RouterStateSnapshot
):Observable<boolean>|Promise<boolean>|boolean{...}
}

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

一个用来定义类的接口，路由器会首先调用它来决定是否应该激活该组件。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。

一个用来定义类的接口，路由器在导航后会首先调用它来决定是否应该取消该组件的激活状态。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。
classCanActivateChildGuardimplementsCanActivateChild{
canActivateChild(
route:ActivatedRouteSnapshot,canActivateChild:[CanActivateGuard],
children:...}

一个用来定义类的接口，路由器会首先调用它来决定是否应该激活该子路由。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。

一个用来定义类的接口，路由器会在渲染该路由之前先调用它来解析路由数据。应该返回一个值或能解析为值的可观察对象(Observable)或承诺(Promise)。
classCanLoadGuardimplementsCanLoad{
canLoad(
route:Route
):Observable<boolean>|Promise<boolean>|boolean{...}
}

{path:...,canLoad:[CanLoadGuard],loadChildren:...}

一个用来定义类的接口，路由器会首先调用它来决定一个惰性加载的模块是否应该被加载。应该返回布尔值或能解析为布尔值的可观察对象(Observable)或承诺(Promise)。
原文链接

Angular2语法快速指南的更多相关文章

  1. 关闭iOS原生MPVolumeView音频路由菜单

    我正在使用MPVolumeView允许用户在使用我的应用程序时控制他喜欢的音频路径.该代码显示了该视图：当用户点击音频路由按钮时,会出现一个带有可用选项的菜单.问题：显示音量视图的屏幕可能需要隐藏,因为我的应用程序处理各种事件,我想同时隐藏音频路由菜单我的问题：有没有人知道是否可以手动关闭MPVolumeView的音频路由选择菜单而无需用户按下取消按钮？解决方法在iOS8上,您可以使用以下使用私有API的代码

  2. iOS：使用蓝牙音频输出(kAudioSessionProperty_OverrideCategoryEnableBluetoothInput)AudioSession

    >如果有可用的A2DP设备,我的音频路由将始终自动切换到kAudioSessionOutputRoute_BluetoothA2DP路由.如何防止此路线更改？我希望你们中的一些人可以帮助我解决这些问题.这对我对CoreAudio的整体理解,特别是AudioSession框架,真的有帮助.解决方法AudioSession是一项棘手的业务.1.BluetoothHFPaudiooutputisonlypossibleincaseofAudioSessionkAudioSessionCategory_PlayA

  3. Swift3.0 Swift2.3 获取IP地址 获取网关地址

    最近需要在Swift项目中获取路由器的网关地址，在网上找了半天的代码也没发现太多有价值的东西，而且大多都是OC代码，很少有Swift的相关代码，只找到了一个通过Swift代码获取设备IP的代码，最后实在没办法只能曲线救国了。下面上代码：思路就是把获取到的设备IP地址的最后一位手动修改为”1”，前面三位不需要修改，比如我的手机ip地址是192.168.31.212，所以网关地址就是192.168.31.1。最近苹果更新了Swift3.0，这里更新一下代码。

  4. Swift3.0服务端开发(二) 静态文件添加、路由配置以及表单提交

    今天博客中就来聊一下Perfect框架的静态文件的添加与访问，路由的配置以及表单的提交。也就是webroot的文件目录变地方了。后方的尾随闭包是对响应的处理。action的地址就是我们在服务器端配置的路由地址“127.0.0.1:8181/login”，而表单提交的方式是POST。

  5. Swift Web 开发之 Vapor - 路由二

    路由参数Vapor提倡使用类型安全的路由参数来接收数据，我们可以在路由方法中使用Swift类型来指定参数类型，Vapor会在内部解析并将参数返回给闭包以供使用，非常方便。Swift中处处有协议，路由参数也是如此，我们所见例子中的Int其实就是Vapor给实现了StringInitializable协议，当然String也已经默认实现。throw另外一大特性就是可以直接在路由中抛出异常，我们可以throw任何遵从Swift.Error协议的对象，当然Vapor已经为我们封装好了几个常用的Error来方便我们

  6. swift – Singleton模式和正确使用Alamofire的URLRequestConvertible

    如果是这样，我该如何设置经理的基础？此外，如果我使用这个管理器//这可以与上面显示的路由器结构一起工作？我是Alamofire图书馆的新手，迅速。然而，当您获得超过6或7例的情况下，这很快就会变得很快。首先，您的模型对象需要符合RouterObject协议。最后一个问题是您无法直接在Routerenum中存储baseURL或OAuthToken。但是，如果您只是使用默认会话触发网络，那么sharedInstance可能就足够了。

  7. Android Studio是否支持用于Android UI设计的AngularJS？

    我对AndroidStudio有疑问：AS在设计XML文件时是否支持AngularJS代码,例如：对于小动画或效果？

  8. android – 如何使用ClientID和ClientSecret在Phonegap中使用Angularjs登录Google OAuth2

    我正尝试使用Angularjs(使用IonicFramework)通过GoogleOAuth2从我的Phonegap应用程序登录.目前我正在使用http://phonegap-tips.com/articles/google-api-oauth-with-phonegaps-inappbrowser.html进行登录.但是当我使用Angular-UI-RouterforIonic时,它正在创建非常

  9. Android VPNService路由排除

    我正在使用OpenVPN和ICS附带的新VpnServiceAPI有没有办法从VPN隧道中定义IP地址的排除？

  10. android – 如何以编程方式在蓝牙和手机之间选择媒体音频

    我需要有一组按钮,其操作类似于JB拨号器中的媒体输出选择器,它将选择“耳机”“扬声器”和“电话听筒”.我可以打开和关闭扬声器,但是在标准手机和蓝牙耳机之间进行媒体输出之间的切换使我望而却步.我如何构建和选项,如控制媒体输出的拨号器？

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印：{{poi.content}}它给了我正确的内容：``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html：当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数？也不由AppModalComponent获取：它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html：app.component.ts：

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现：1)在控制器中定义选项卡href：2)声明一个函数来改变控制器中的散列：3)使用以下标记：我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用？>但是标签外的按钮(登陆)工作正常,为什么？>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2：将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线：app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说：如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里：祝贺并感谢您的耐心等待！

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗？

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的：零件：服务：我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid：过滤后如何获取总项数

    提前致谢：)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数：要么您可以使用以下命令获取所选行的数量：

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包？

返回
顶部