Angular 源码学习之一：Common

实现基本的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

}