本篇文章主要介绍了详解Angular 4.x NgIf，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
NgIf 指令作用
ngIf 指令用于根据表达式的值，在指定位置渲染 then 或 else 模板的内容。
- then 模板除非绑定到不同的值，否则默认是 ngIf 指令关联的内联模板。
- else 模板除非绑定对应的值，否则默认是 null。
NgIf 指令语法
简单形式
<!--语法糖--><div>...</div><!--Angular 2.x中使用template--><div>...</div>
使用else块
<div>...</div>...
使用then和else块
<div></div>......
使用as语法
<div>{{value}}</div>...
NgIf 使用示例
@Component({ selector: 'ng-if-then-else', template: ` <button>{{show ? 'hide' : 'show'}}</button><button>Switch Primary</button> show = {{show}} <br><div>this is ignored</div>Primary text to showSecondary text to showAlternate text while primary text is hidden ` }) class NgIfThenElse implements OnInit { thenBlock: TemplateRef = null; show: boolean = true; @ViewChild('primaryBlock') primaryBlock: TemplateRef = null; @ViewChild('secondaryBlock') secondaryBlock: TemplateRef = null; switchPrimary() { this.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock; } ngOnInit() { this.thenBlock = this.primaryBlock; } }
基础知识
TemplateRef
TemplateRef 实例用于表示模板对象，TemplateRef 抽象类的定义如下：
// angular\packages\core\src\linker\template_ref.ts export abstract class TemplateRef { abstract get elementRef(): ElementRef; abstract createEmbeddedView(context: C): EmbeddedViewRef; }
ViewContainerRef
ViewContainerRef 实例提供了 createEmbeddedView() 方法，该方法接收 TemplateRef 对象作为参数，并将模板中的内容作为容器 (comment 元素) 的兄弟元素，插入到页面中。
NgIfContext
NgIfContext 实例用于表示 NgIf 上下文。
// angular\packages\common\src\directives\ng_if.ts export class NgIfContext { public $implicit: any = null; public ngIf: any = null; }
NgIf 源码分析
NgIf 指令定义
@Directive({ selector: '[ngIf]' // 属性选择器 - })
NgIf 类私有属性及构造函数
export class NgIf { // 创建NgIfContext上下文 private _context: NgIfContext = new NgIfContext(); // 表示then模板对象 private _thenTemplateRef: TemplateRef|null = null; // 表示else模板对象 private _elseTemplateRef: TemplateRef|null = null; // 表示根据then模板创建的EmbeddedViewRef视图 private _thenViewRef: EmbeddedViewRef|null = null; // 表示根据else模板创建的EmbeddedViewRef视图 private _elseViewRef: EmbeddedViewRef|null = null; constructor( private _viewContainer: ViewContainerRef, templateRef: TemplateRef) { this._thenTemplateRef = templateRef; // then模板的默认值为ngIf指令关联的内联模板 } }
NgIf 类输入属性
@Input() set ngIf(condition: any) { this._context.$implicit = this._context.ngIf = condition; this._updateView(); // 更新视图 } @Input() set ngIfThen(templateRef: TemplateRef) { this._thenTemplateRef = templateRef; this._thenViewRef = null; // 清除之前创建的视图 this._updateView(); } @Input() set ngIfElse(templateRef: TemplateRef) { this._elseTemplateRef = templateRef; this._elseViewRef = null; // 清除之前创建的视图 this._updateView(); }
_updateView() 私有方法
// 更新视图 private _updateView() { // this._context.$implicit = this._context.ngIf = condition // 若condition表达式的值为truthy if (this._context.$implicit) { // 若_thenViewRef为null且_thenTemplateRef存在，则创建_thenViewRef内嵌视图 if (!this._thenViewRef) { this._viewContainer.clear(); this._elseViewRef = null; if (this._thenTemplateRef) { this._thenViewRef = this._viewContainer.createEmbeddedView(this._thenTemplateRef, this._context); } } } else { // condition表达式的值为falsy // 若_elseViewRef为null且_elseTemplateRef存在，则创建_elseViewRef内嵌视图 if (!this._elseViewRef) { this._viewContainer.clear(); this._thenViewRef = null; if (this._elseTemplateRef) { this._elseViewRef = this._viewContainer.createEmbeddedView(this._elseTemplateRef, this._context); } } } }
ngIf 指令的源码相对比较简单，最核心的是 _updateView() 方法。而该方法中最重要的功能就是如何基于模板对象创建内嵌视图。接下来我们来分析一下 ViewContainerRef 对象的 createEmbeddedView() 方法。
ViewContainerRef – createEmbeddedView()
方法签名
// angular\packages\core\src\linker\view_container_ref.ts export abstract class ViewContainerRef { /** * 基于TemplateRef对象创建Embedded View(内嵌视图)，然后根据`index`指定的值，插入到容器中。 * 如果没有指定`index`的值，新创建的视图将作为容器中的最后一个视图插入。 */ abstract createEmbeddedView( templateRef: TemplateRef, context?: C, index?: number): EmbeddedViewRef; }
方法实现
// angular\packages\core\src\view\re<mark style="color:transparent">来源gaodaimacom搞#代%码网</mark>fs.ts class ViewContainerRef_ implements ViewContainerData { // ... createEmbeddedView( templateRef: TemplateRef, context?: C, index?: number): EmbeddedViewRef { // 调用TemplateRef对象createEmbeddedView()方法创建EmbeddedViewRef对象 const viewRef = templateRef.createEmbeddedView(context || {}); // 根据指定的index值，插入到视图容器中 this.insert(viewRef, index); return viewRef; } } // ViewContainerData接口继承于ViewContainerRef抽象类 export interface ViewContainerData extends ViewContainerRef { _embeddedViews: ViewData[]; } export interface ViewData { def: ViewDefinition; root: RootData; renderer: Renderer2; parentNodeDef: NodeDef|null; parent: ViewData|null; viewContainerParent: ViewData|null; component: any; context: any; nodes: {[key: number]: NodeData}; state: ViewState; oldValues: any[]; disposables: DisposableFn[]|null; }
通过观察 ViewContainerRef_ 类中的 createEmbeddedView() 方法，我们发现该方法内部是调用 TemplateRef 对象的 createEmbeddedView() 方法来创建内嵌视图。因此接下来我们再来分析一下 TemplateRef 对象的 createEmbeddedView() 方法。
TemplateRef – createEmbeddedView()
方法签名
// angular\packages\core\src\linker\template_ref.ts export abstract class TemplateRef { abstract createEmbeddedView(context: C): EmbeddedViewRef; }
方法实现
// angular\packages\core\src\view\refs.ts class TemplateRef_ extends TemplateRef implements TemplateData { // ... createEmbeddedView(context: any): EmbeddedViewRef { return new ViewRef_(Services.createEmbeddedView( this._parentView, this._def, this._def.element !.template !, context)); } } export interface TemplateData extends TemplateRef { _projectedViews: ViewData[]; }
看完上面的源码，毫无疑问接下来我们要继续分析 Services 对象中的 createEmbeddedView() 方法。
Services – createEmbeddedView()
Services 对象定义
// angular\packages\core\src\view\types.ts export const Services: Services = { setCurrentNode: undefined !, createRootView: undefined !, createEmbeddedView: undefined !, createComponentView: undefined !, createNgModuleRef: undefined !, overrideProvider: undefined !, clearProviderOverrides: undefined !, checkAndUpdateView: undefined !, checkNoChangesView: undefined !, destroyView: undefined !, resolveDep: undefined !, createDebugContext: undefined !, handleEvent: undefined !, updateDirectives: undefined !, updateRenderer: undefined !, dirtyParentQueries: undefined !, };
Services 对象初始化
// angular\packages\core\src\view\services.ts export function initServicesIfNeeded() { if (initialized) { return; } initialized = true; const services = isDevMode() ? createDebugServices() : createProdServices(); Services.setCurrentNode = services.setCurrentNode; Services.createRootView = services.createRootView; Services.createEmbeddedView = services.createEmbeddedView; Services.createComponentView = services.createComponentView; Services.createNgModuleRef = services.createNgModuleRef; Services.overrideProvider = services.overrideProvider; Services.clearProviderOverrides = services.clearProviderOverrides; Services.checkAndUpdateView = services.checkAndUpdateView; Services.checkNoChangesView = services.checkNoChangesView; Services.destroyView = services.destroyView; Services.resolveDep = resolveDep; Services.createDebugContext = services.createDebugContext; Services.handleEvent = services.handleEvent; Services.updateDirectives = services.updateDirectives; Services.updateRenderer = services.updateRenderer; Services.dirtyParentQueries = dirtyParentQueries; }
在 initServicesIfNeeded() 方法中，会根据当前所处的模式，创建不同的 Services 对象。接下来 我们直接来看一下 createProdServices() 方法：
function createProdServices() { return { setCurrentNode: () => {}, createRootView: createProdRootView, createEmbeddedView: createEmbeddedView // 省略了其它方法 }
createEmbeddedView() 方法
// angular\packages\core\src\view\view.ts export function createEmbeddedView( parent: ViewData, anchorDef: NodeDef, viewDef: ViewDefinition, context?: any): ViewData { // embedded views are seen as siblings to the anchor, so we need // to get the parent of the anchor and use it as parentIndex. // 创建ViewData对象 const view = createView(parent.root, parent.renderer, parent, anchorDef, viewDef); // 初始化ViewData对象-设置component及context属性的值 initView(view, parent.component, context); // 创建视图中的节点，即设置view.nodes数组的属性值 // const nodes = view.nodes; for(...) { ...; nodes[i] = nodeData; } createViewNodes(view); return view; }
此时发现如果完整分析所有的方法，会涉及太多的内容。源码分析就到此结束，有兴趣的读者请自行阅读源码哈(请各位读者见谅)。接下来我们来总结一下 createEmbeddedView() 方法调用流程：
ViewContainerRef_ -> createEmbeddedView() => TemplateRef_ -> createEmbeddedView() => Services -> createEmbeddedView() => Call createEmbeddedView()
以上就是详解Angular 4.x NgIf 的用法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：详解Angular 4.x NgIf 的用法
转载请注明原文链接：详解Angular 4.x NgIf 的用法
