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的更多相关文章

  1. [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 ...

  2. AngularJS.directive系列:嵌套directive的通讯及scope研究

    一.directive中的scope directive无疑是AngularJS中比较复杂难懂的部分,而directive中个scope更是其中最复杂的部分了,尤其是在嵌套directive中互相通讯 ...

  3. [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 ...

  4. 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...

  5. Angular 个人深究(一)【Angular中的Typescript 装饰器】

    Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...

  6. (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...

  7. angular.module()创建、获取、注册angular中的模块

    // 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块 var createModule = angular.module("myModule", []); // 只 ...

  8. Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  9. [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 ...

随机推荐

  1. DG Cascade Standby

    SUMMARY 1. logical standby不支持cascading standby 2. 11.2.0.2之前版本cascading standby不支持RAC 3. 11.2.0.3之前版 ...

  2. AJAX - 封装AJAX GET 数组join( )方法 键值对取value POST请求参数注意点

    function objToStr(obj){ obj.t = new Date().getTime(); // 给obj动态增加了一个属性 // 这个给对象添加属性的方法, 会被直接加到键值对里?? ...

  3. 03002_MySQL数据库的安装和配置

    1.MySQL的安装 (1)下载mysql-5.5.49-win32.msi, 链接:MySQL安装包下载 密码:geqh : (2)打开下载的MySQL安装文件mysql-5.5.27-win32. ...

  4. WPF 入门《常用控件》

    1.GroupBox 注意: GroupBox仍然需要布局容器来放置元素.如: StackPanel面板 <GroupBox Header="select number?"& ...

  5. SpringMVC,Mybatis,FreeMarker连接mycat示例(一)

    首页 > 程序开发 > 软件开发 > Java > 正文 SpringMVC,Mybatis,FreeMarker连接mycat示例(一) 项目结构如图: 首先是各种配置文件, ...

  6. 洛谷 P2908 [USACO08OPEN]文字的力量Word Power

    P2908 [USACO08OPEN]文字的力量Word Power 题目描述 Farmer John wants to evaluate the quality of the names of hi ...

  7. Delphi部份函数,命令,属性中文说明

    Abort 函数 引起放弃的意外处理 Abs 函数 绝对值函数 AddExitProc 函数 将一过程添加到运行时库的结束过程表中 Addr 函数 返回指定对象的地址 AdjustLineBreaks ...

  8. 高可用架构篇--MyCat在MySQL主从复制基础上实现读写分离

    实战操作可参考:http://www.roncoo.com/course/view/3117ffd4c74b4a51a998f9276740dcfb 一.环境 操作系统:CentOS-6.6-x86_ ...

  9. hunnu11550:欧拉函数

    Problem description   一个数x的欧拉函数Φ(x)定义为全部小于x的正整数中与x互质的数的数目,如小于5且和5互质的数有1.2.3.4,一共4个,故Φ(5)=4. 对于随意正整数x ...

  10. python中数据结构

    列表:数组,矩阵 元组 映射:字典 集合