实现基本的Angular框架功能,包括directives和pipes,路由中使用的位置服务,HTTP services HTTP服务,localization support本地化支持等。
Directives
1: NgClass
在HTML元素上添加和删除CSS类。
Input:
@Input('class') klass: string
@Input('class') ngClass: string | string[] | Set<string> | { [klass: string]: any; }
示例
<div class="value-bar" [ngClass]="[value < target ? 'green' : 'orange']" [style.width.%]="valueBarWidth"></div>
_iterableDiffers: IterableDiffers; _ngEl: ElementRef
_keyValueDiffers: KeyValueDiffers; _renderer: Renderer2
2: NgStyle
用于更新包含的HTML元素的样式。
Input
@Input() ngStyle: { [klass: string]: any; }
示例
<div class="parameter-item top" [ngStyle]="{width: sidePanelOpen ? '100%' : ''}">
_differs: KeyValueDiffers,
3: Ng if
根据表达式的值,有条件地包括模板。
Input
@Input ngIf: T
@Input ngIfThen: TemplateRef<NgIfContext<T>>
@Input ngIfElse: TemplateRef<NgIfContext<
_viewContainer: ViewContainerRef, _template: TemplateRef<NgForOfContext<T, U>>, _differs: IterableDiffers
4 : Ng Switch
根据不同的key , 渲染每个匹配的视图。
Input
@Input ngSwitch: any
示例
<ng-container [ngSwitch]="mode">
<ng-container *ngSwitchCase="'ADD'">
<i class="fa fa-plus"></i> New Filter Definition
</ng-container>
<ng-container *ngSwitchCase="'EDIT'">
<i class="fa fa-edit"></i> Edit {{ filterDefinition?.name }}
</ng-container>
</ng-container>
5: Ng Plural
根据数值添加/删除DOM子树。
Input
@Input() ngPlural: number
_localizaion: NgLocalization
6: NgForOf
为集合中的每个项目呈现一个模板。指令放置在一个元素上,该元素成为克隆模板的父级。
Input
@Input ngForOf: U&NgIterable<T>|undefined|null
@Input ngForTrackBy: TrackByFunction<T>
@Input ngForTemplate: TemplateRef<NgForOfContext<T, U>>
示例
<ng-template ngFor let-row [ngForOf]="sharedSpotlights">
<optgroup [label]="row.spotlightGroup.title">
<option *ngFor="let target of row.spotlight[0]" [ngValue]="target.title">{{target.title}}</option>
</optgroup>
</ng-template>
NgForOfContext {
get first();
get last();
get even();
get odd()
}
7: NgTemplateOutlet
用于基于已有的 TemplateRef 对象,插入对应的内嵌视图。
Input
@Input() ngTemplateOutletContext: Object | null
@Input() ngTemplateOutlet: TemplateRef<any> | null
示例
<ng-container *ngTemplateOutlet="gridTemplate"></ng-container>
8: NgComponentOutlet
并将其视图插入当前视图
Input
@Input ngComponentOutlet: Type<any>
@Input() ngComponentOutletInjector: Injector
@Input() ngComponentOutletContent: any[][]
@Input() ngComponentOutletNgModuleFactory: NgModuleFactory<any>
示例
<ng-container [ngComponentOutlet]="twoComponent"></ng-container>
IterableDiffers: NgFor、NgClass 等使用的不同迭代策略的存储库。
export function isListLikeIterable(obj) {
if (!isJsObject(obj))
return false;
return Array.isArray(obj) ||
(!(obj instanceof Map) && // JS Map are iterables but return entries as [k, v]
getSymbolIterator() in obj); // JS Iterable have a Symbol.iterator prop
}