[Angular Directive] Write a Structural Directive in Angular 2
Structural directives enable you to use an element as a template for creating additional elements. Creating structural directives requires a knowledge of <template> elements, but they're easy and extremely powerful once you undrestand the concepts.
What is stuctural looks like:
<h1 *structure>This is structure directive</h1> <!-- Equals to -->
<template structure>
<h1>This is structure directive</h1>
</template>
So Structural Directive is just something shorthand for template.
import {Directive, TemplateRef, ElementRef, ViewContainerRef, Input} from '@angular/core';
@Directive({
selector: '[structure]'
})
export class StructureDirective {
@Input('structure') num;
constructor(private template: TemplateRef<any>,
private view: ViewContainerRef) {
}
ngAfterContentInit() {
let num: number = Number(this.num);
if (num > ) {
while (num --){
this.view.createEmbeddedView(this.template);
}
}
}
}
<h1 *structure="'4'">This is structure directive</h1>
So it will print out:

[Angular Directive] Write a Structural Directive in Angular 2的更多相关文章
- [Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2
Just like passing in an array to *ngFor, you can pass in any value into your structural directive s ...
- AngularJS.directive系列:嵌套directive的通讯及scope研究
一.directive中的scope directive无疑是AngularJS中比较复杂难懂的部分,而directive中个scope更是其中最复杂的部分了,尤其是在嵌套directive中互相通讯 ...
- [Angular Directive] Implement Structural Directive Data Binding with Context in Angular
Just like in *ngFor, you're able to pass in data into your own structural directives. This is done b ...
- 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...
- Angular 个人深究(一)【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
- (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...
- angular.module()创建、获取、注册angular中的模块
// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块 var createModule = angular.module("myModule", []); // 只 ...
- Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...
- [Angular] Step-By-Step Implementation of a Structural Directive - Learn ViewContainerRef
For example we have two buttons: When we click nether one of those tow button, the modal should show ...
随机推荐
- 17.Node.js 回调函数--异步编程
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程 ...
- CMake设置生成vs工程的动态库输出路径
作者:朱金灿 来源:http://blog.csdn.net/clever101 在网上搜了很多的资料,发现CMake不能设置一个动态库工程的输出目录和中间目录,难道除了VC之外其它编译器如gcc中没 ...
- JavaScript--数据结构之队列
5.1 队列的操作 队列是特殊的列表,只能一端入队(队尾)插入操作,一端出队(队头)删除操作.底层用数组,利用javascript数组优于其它语言的数组的方法,shift();删除第一个元素,push ...
- Chrome 好用的扩展程序
1. 谷歌访问助手.见名知意. 2. ColorZilla.方便的拾色器和取色器. 3. Restlet Client.方便测试接口. 4. Vue Devtools.Vue项目开发利器. 5. Ta ...
- BZOJ3262: 陌上花开(三维偏序,CDQ分治)
Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),用三个整数表示. 现在要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量. 定义一朵花A比另一朵花B要美 ...
- C++编码优化之减少冗余拷贝或赋值
临时变量 目前遇到的一些产生临时变量的情况:函数实参.函数返回值.隐式类型转换.多余的拷贝 1. 函数实参 这点应该比较容易理解,函数参数,如果是实参传递的话,函数体里的修改并不会影响调用时传入的参数 ...
- 自己在linux上编译、链接、动态库和静态库的学习笔记
在平常的项目中,我们都是使用公司要求的makefile.makedebug一类的文件,因此,在编译.链接.生成和链接动态库与静态库的时候,我们只是简单的使用一些已经设置的变量,只是简单的修改.添加一些 ...
- Android ProGuard代码混淆技术详解
前言 受<APP研发录>启发,里面讲到一名Android程序员,在工作一段时间后,会感觉到迷茫,想进阶的话接下去是看Android系统源码呢,还是每天继续做应用,毕竟每天都是画UI ...
- Android Warning not all local changes may be shown due to an error
idea使用svn出现Warning not all local changes may be shown due to an error,如下图所示: 解决方案: 1.File > Setti ...
- Keepalived + Mysql 双主
VIP 192.168.1.41 Master 192.168.1.42 Slave 192.168.1.43 .配置 yum -y install mysql-server chkconfig -- ...