angular2 api整理之通用模块

不知不觉接触angular2也有半年时间了,但是对于angular2仍然是一知半解。总觉得应该系统的了解一下它的api,正好ng2马上要有稳定版本了。是时候花一些时间整理一下了

一、通用包

1. 常量类

1.1 根路径 APP_BASE_HREF

主要作用:在顶层组件中使用bootstrap启动整个app的时候设置根url,格式如下

1
2
3
4
  bootstrap(AppCmp, [
    ROUTER_PROVIDERS,
    {provide: APP_BASE_HREF, useValue: '/my/app'}
  ]);

1.2 指令常量 COMMON_DIRECTIVES

主要作用:所有核心内置指令的集合:包含NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, NgModel, NgForm等。 CORE_DIRECTIVES少了NgModel和NgForm,不过它是稳定的。COMMON_DIRECTIVES还是试验性阶段。 单个引入

1
2
3
4
5
6
7
8
import {NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, NgModel, NgForm} from
'@angular/common';
@Component({
  selector: 'my-component',
  templateUrl: 'myComponent.html',
  directives: [NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, NgModel, NgForm,
OtherDirective]
})

使用常量引入

1
2
3
4
5
6
import {COMMON_DIRECTIVES} from '@angular/common';
@Component({
  selector: 'my-component',
  templateUrl: 'myComponent.html',
  directives: [COMMON_DIRECTIVES, OtherDirective]
})

1.3 管道常量 COMMON_PIPES

目前还是试验性的。功能同上,是所有 管道的合集 包含 AsyncPipe、I18nPluralPipe、I18nSelectPipe、SlicePipe等

1.4 表单指令常量 FORM_DIRECTIVES

试验阶段。所有有关表常的指令礼盒

1.5 表单提供者常量 FORM_PROVIDERS

在bootsrap的时候注入进去

1.6 异步验证常量 NG_ASYNC_VALIDATORS

为了控制一个表单的异步验证,要在验证中添加 multi: true,当然也少不了NG_VALIDATORS

1
bootstrap(MyApp, [{provide: NG_VALIDATORS, useValue: myValidator, multi: true}]);

1.7 值存储器常量 NG_VALUE_ACCESSOR

具体作用和使用方法不明确

2、 接口

2.1 控制值存储器ControlValueAccessor

具体作用和使用方法不明确

2.2 表单 Form

NgFormModel 和 NgForm实现在这个接口,只在form模块使用

2.3 路径变化事件 UrlChangeEvent

当监听到URL变化的时候触发此事件

2.4 路径变化监听器 UrlChangeListener

监听URL的变化

2.5 验证Validator

在写验证指令的时候实现这个接口

1
2
3
4
5
6
7
8
9
@Directive({
  selector: '[custom-validator]',
  providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
})
class CustomValidatorDirective implements Validator {
  validate(c: Control): {[key: string]: any} {
    return {"custom": true};
  }
}

3. 类

3.1 抽象控制 AbstractControl

署名 - 非商业性使用 - 禁止演绎 4.0