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. 内存泄漏与指针悬挂&野指针介绍

    内存泄漏概念:内存泄漏时指动态申请的内存空间没有正常释放,但是也不能继续使用的情况. 例如: char *ch1; ch1 = new char('A'); char = *ch2 = new cha ...

  2. the resource is not on the build path of a java project错误

    在eclipse中,使用mavenimport了一个工程,但是在对某一个类进行F3/F4/ctrl+alt+H操作的时候报错:“the resource is not on the build pat ...

  3. 创建VG

    创建VG smit mkvg Add a Volume Group Add a Scalable Volume Group   VOLUME GROUP name                    ...

  4. BZOJ4196: [Noi2015]软件包管理器(树链剖分)

    Description Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖( ...

  5. DTU(用于将串口数据转换为IP数据或将IP数据转换为串口数据通过无线通信网络进行传送的无线终端设备)

    DTU (Data Transfer unit),是专门用于将串口数据转换为IP数据或将IP数据转换为串口数据通过无线通信网络进行传送的无线终端设备.DTU广泛应用于气象.水文水利.地质等行业.

  6. 关于查看域名A记录,MX记录,CNAME记录-NSLOOKUP用法介绍

    关于查看域名A记录,MX记录,CNAME记录-NSLOOKUP用法介绍 用ping查看域名的IP地址,这样只能查到域名的A记录,要查询域名的MX记录.CNAME记录或NS记录,可用nslookup命令 ...

  7. AndroidStudio 内存泄漏分析 Memory Monitor

    ok.写一段内存泄漏的code private TextView txt; @Override protected void onCreate(Bundle savedInstanceState) { ...

  8. StringBuilder类的使用总结

    String 对象是不可改变的.每次使用 System.String 类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需要对字符串执行重复修改的情况下,与创建新 ...

  9. 4. Vue-Resource / axios 异步插件

    安装 cnmp i vue-resource --save (--save 安装到dependencies下) 引用 <script src="node_modules/vue-res ...

  10. vue使用jsonp

    axios不支持jsonp,所以需使用其他插件:vue-jsonp npm i vue-jsonp -S 然后在 src/main.js : import Vue from 'vue' import ...