Angular 自定义 structural 指令的一个例子

The <ng-container> is a syntax element recognized by the Angular parser. It’s not a directive, component, class, or interface. It’s more like the curly braces in a JavaScript if-block:

if (someCondition) {statement1;statement2;statement3;
}

Without those braces, JavaScript would only execute the first statement when you intend to conditionally execute all of them as a single block. The <ng-container> satisfies a similar need in Angular templates.

编写一个功能和NgIf相反的指令：

源代码如下：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';/*** Add the template content to the DOM unless the condition is true.*//* The directive's selector is typically the directive's
attribute name in square brackets, [appUnless]. The brackets define a CSS attribute selector.
*/
@Directive({ selector: '[appUnless]'})
export class UnlessDirective {private hasView = false;/*A simple structural directive like this one creates anembedded view from the Angular-generated <ng-template> andinserts that view in a view container adjacent to the directive's original <p> host element.*//*You'll acquire the <ng-template> contents with a TemplateRef and access the view container through a ViewContainerRef.
这里不用操心这些服务的 provider 是谁？*/constructor(// 访问<ng-template>内容private templateRef: TemplateRef<any>,// 访问view containerprivate viewContainer: ViewContainerRef) { }/*The directive consumer expects to bind a true/false condition to [appUnless]. That means the directive needs an appUnless property, decorated with @Input*/@Input() set appUnless(condition: boolean) {// 如果condition不满足才显示view/*Angular sets the appUnless property whenever the value of the condition changes. Because the appUnless property does work, it needs a setter.*/if (!condition && !this.hasView) {this.viewContainer.createEmbeddedView(this.templateRef);this.hasView = true;} else if (condition && this.hasView) {this.viewContainer.clear();this.hasView = false;}}
}

在App module里的declarations区域导入新建的Directive：

在 Component HTML 里消费这个自定义指令：

<h2 id="appUnless">UnlessDirective</h2>
<p>The condition is currently<span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.<button(click)="condition = !condition"[ngClass] = "{ 'a': condition, 'b': !condition }" >Toggle condition to {{condition ? 'false' : 'true'}}</button>
</p><!-- 为什么这里消费 Directive 用的是 *? -->
<p *appUnless="condition" class="unless a">(A) This paragraph is displayed because the condition is false.
</p><p *appUnless="!condition" class="unless b">(B) Although the condition is true,this paragraph is displayed because appUnless is set to false.
</p>

最后的效果：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular 自定义 structural 指令的一个例子相关推荐

Angular自定义structural指令的实例化过程以及set方法的调用
我有一个自定义指令*appUnless, 在第48行使用,这个<p>前面是第39行的<p>,后面是第52行的<p>: 观察运行时构造函数传入的elementRef: ...
Angular里的structural directive的一个例子
在product-list.component.html里,编写如下代码: <h2>Jerry Products</h2><div *ngFor="let pr ...
Angular应用的router-outlet使用一个例子
项目地址:https://angular-jerry-empty-store.stackblitz.io TopBar Component里,使用Angular routerLink指令设置了一个路由 ...
Angular rxjs fromEvent使用的一个例子
源代码: import { Component, OnInit } from '@angular/core'; import { JerrySandBoxService } from './jerry ...
Angular元素属性绑定的一个例子
如下图的例子:a标签的disabled class绑定到model.active属性的取反值,即如果model.active为false,该标签就为disabled状态. 这个a标签页默认是disab ...
Angular list列表绑定的一个例子
新建一个hero数组作为测试数据: import { Hero } from './heroes/hero';export const HEROES: Hero[] = [{ id: 11, name ...
Angular structural指令host element的定位调试
我实现了一个自定义structural指令,施加的host Element是<p>: 运行时,Angular解析到模板里这一行: 调用函数ɵɵtemplate,给创建一个LContaine ...
Angular component的一个例子
官网:https://angular.io/guide/architecture-components Before a view is displayed, Angular evaluates th ...
浅谈Angular如何自定义创建指令@Directive
知识普及 Angular 指令根据其创建形式分为内置指令和自定义指令,指令按照类型分: 模板指令--组件就是模板指令(只能自定义) 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令(有内 ...

Angular 自定义 structural 指令的一个例子

Angular 自定义 structural 指令的一个例子相关推荐

最新文章

热门文章