Angular自定义structural指令的一个例子
时间:2022-07-26
本文章向大家介绍Angular自定义structural指令的一个例子,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
The 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 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 an
embedded view from the Angular-generated <ng-template> and
inserts 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.
*/
constructor(
// 访问<ng-template>内容
private templateRef: TemplateRef<any>,
// 访问view container
private 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>
<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>
最后的效果:
- 模拟Executor策略的实现如何控制执行顺序?怎么限制最大同时开启线程的个数?为什么要有一个线程来将结束的线程移除出执行区?转移线程的时候要判断线程是否为空遍历线程的容器会抛出ConcurrentM
- ViewPager快速实现引导页
- Linux学习 - 常用和不太常用的实用awk命令
- 漏洞预警:厄运cookie(Misfortune Cookie)漏洞影响全球1200万台路由器
- 漏洞预警:Google安全研究人员发现NTP(网络时间协议)最新漏洞
- 揭秘:从内部源码看Facebook技术(第一集)
- Python 自然语言处理《釜山行》人物关系
- 注意:C++中double的表示是有误差的
- 完善RecyclerView,添加首尾视图
- 初识Node.js
- Linux学习 - SED操作,awk的姊妹篇
- Android面试之高级篇
- 解密所有APP运行过程中的内部逻辑
- RecyclerView数据动态更新
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法