Angular 2.x学习教程之结构指令详解


Posted in Javascript onMay 25, 2017

结构指令是什么

结构指令通过添加和删除 DOM 元素来更改 DOM 布局。Angular 中两个常见的结构指令是 *ngIf*ngFor

了解 * 号语法

* 号是语法糖,用于避免使用复杂的语法。我们以 *ngIf 指令为例:

Angular 2.x学习教程之结构指令详解

(图片来源:https://netbasal.com/)

  • Angular 把 host (宿主元素) 包装在 template 标签里面
  • Angular 将 ngIf 转换为属性绑定 - [ngIf]

创建结构指令

首先,让我们了解如何创建一个结构指令。 接下来我们将要实现一个简单的 ngIf 指令。

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[myNgIf]'})
export class MyNgIfDirective {

 constructor(
 private templateRef: TemplateRef<any>,
 private viewContainer: ViewContainerRef) { }

 @Input() set myNgIf(condition: boolean) {
 if (condition) {
  this.viewContainer.createEmbeddedView(this.templateRef);
 } else {
  this.viewContainer.clear();
 }
 }
}

我们可以按照以下方式使用我们的指令:

<div *myNgIf=”condition”></div>

下面我们来解释一下上面的代码。

TemplateRef

如名字所示,TemplateRef 用于表示模板的引用。

Angular 2.x学习教程之结构指令详解

(图片来源:https://netbasal.com/)

ViewContainerRef

正如上面介绍的,模板中包含了 DOM 元素,但如果要显示模板中定义的元素,我们就需要定义一个插入模板中元素的地方。在 Angular 中,这个地方被称作容器,而 ViewContainerRef 用于表示容器的引用。那什么元素会作为容器呢?

Angular 将使用 comment 元素替换 template 元素,作为视图容器。

我们来看一个具体的示例:

@Component({
 selector: 'my-app',
 template: `
 <div>
  <h2 *myNgIf="condition">Hello {{name}}</h2>
  <button (click)="condition = !condition">Click</button>
 </div>
 `,
})
export class App {
 name: string;
 condition: boolean = false;
 constructor() {
 this.name = 'Angular2'
 }
}

以上代码成功运行后,浏览器的显示内容如下:

Angular 2.x学习教程之结构指令详解

(图片来源:https://netbasal.com/)

ViewContainerRef 对象提供了 createEmbeddedView() 方法,该方法接收 TemplateRef 对象作为参数,并将模板中的内容作为容器 (comment 元素) 的兄弟元素,插入到页面中。

现在,你已经了解如何创建结构指令,接下来让我们看看两个具体的实例。

基于用户角色显示不同的内容

指令定义

@Directive({selector: '[ifRole]'})
export class IfRoleDirective {
 user$ : Subscription;
 @Input("ifRole") roleName : string;

 constructor(
  private templateRef : TemplateRef<any>,
  private viewContainer : ViewContainerRef,
  private authService : AuthService ) {}

 ngOnInit() {
 this.user$ = this.authService.user
  .do(() => this.viewContainer.clear())
  .filter(user => user.role === this.roleName)
  .subscribe(() => {
  this.viewContainer.createEmbeddedView(this.templateRef);
  });
 }

 ngOnDestroy() {
 this.user$.unsubscribe();
 }
}

指令应用

<div *ifRole="'admin'">
 Only for Admin
</div>

<div *ifRole="'client'">
 Only for Client
</div>

<div *ifRole="'editor'">
 Only for Editor
</div>

创建 Range 指令

指令定义

import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core';

@Directive({
 selector: '[range]'
})
export class RangeDirective {
 _range: number[];

 @Input()
 set range(value: number) {
  this.vcr.clear();
  this._range = this.generateRange(value[0], value[1]);
  this._range.forEach(num => {
   this.vcr.createEmbeddedView(this.tpl, {
    $implicit: num
   });
  });
 }

 constructor(
  private vcr: ViewContainerRef,
  private tpl: TemplateRef<any>) { }

 private generateRange(from: number, to: number): number[] {
  var numbers: number[] = [];
  for (let i = from; i <= to; i++) {
   numbers.push(i);
  }
  return numbers;
 }
}

以上示例中,我们在调用 createEmbeddedView() 方法时,设置了第二个参数 {$implicit: num}  。Angular 为我们提供了 let 模板语法,允许在生成上下文时定义和传递上下文。

这将允许我们引用 *range="[20,30]; let num" 模板中声明的变量。我们使用 $implicit 名称,因为我们不知道用户在使用这个指令时,会使用什么名字。

Angular 2.x学习教程之结构指令详解

(图片来源:https://netbasal.com/)

指令应用

<h1>Your age:</h1>
<select>
 <ng-container *range="[18, 80]; let num">
 <option [ngValue]="num">{{num}}</option>
 </ng-container>
</select>

<h1>Year:</h1>
<select>
 <ng-container *range="[1998, 2016]; let num">
 <option [ngValue]="num">{{num}}</option>
 </ng-container>
</select>

以上代码成功运行后,浏览器的显示内容如下:

Angular 2.x学习教程之结构指令详解

(图片来源:https://netbasal.com/)

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
ant design实现圈选功能
Dec 17 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 #Javascript
js获取一组日期中最近连续的天数
May 25 #Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 #Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 #Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 #Javascript
React-router中结合webpack实现按需加载实例
May 25 #Javascript
node.js操作mongodb简单示例分享
May 25 #Javascript
You might like
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
js控制input输入字符解析
2013/12/27 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
python批量下载图片的三种方法
2013/04/22 Python
简单介绍Python中的RSS处理
2015/04/13 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
服务行业个人求职的自我评价
2013/12/12 职场文书
给孩子的新年寄语
2014/04/08 职场文书
培训感想范文
2015/08/07 职场文书
创业计划书之面包店
2019/09/12 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书