Angular 源码学习之一：Common

原创已于 2023-12-05 10:36:38 修改 · 892 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular

于 2021-07-15 15:44:16 首次发布

Angular 专栏收录该内容

77 篇文章

订阅专栏

本文将带你深入理解Angular框架的关键组件，包括NgClass用于CSS类管理，NgStyle调整样式，NgIf条件渲染，NgSwitch动态视图切换，NgPlural处理数值变化，NgFor遍历数据，以及NgTemplateOutlet和NgComponentOutlet的组件嵌套。掌握这些核心技术，提升Angular应用开发能力。

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

示例

_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">

<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

}