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. 38..Node.js工具模块---底层的网络通信--Net模块

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html Node.js Net 模块提供了一些用于底层的网络通信的小工具,包含了创建服务器/ ...

  2. STS清理

    图中插入代码如下,文件名随意最好见名知意 Add 'this' qualifier to unqualified field accesses Add 'this' qualifier to unqu ...

  3. dropdown下拉菜单

    <!--声明方式的下拉菜单:三个要点--> <!--1 外围容器用dropdown包裹--> <!--2 内部点击事件data-toggle--> <!--3 ...

  4. Tuple<int, int> Dictionary<string, object>妙用

    Tuple<int, int> Dictionary<string, object>妙用

  5. 杭电1102 Constructing Roads

    Constructing Roads Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  6. Spring3拦截引发的问题——WEB开发中的client路径

    什么是client路径? 第一类.也就是html或js文件等client訪问的文件里的路径,这里包含一些资源文件的引入(js.css还有各种图片等),或是跳转到静态html页面,总之获取的都是静态资源 ...

  7. eclipse-12.04无图标,无法固定到侧边栏

    今天下载了adt-bundle,但是eclipse打开以后,侧边栏显示的是一个问好,而且没办法固定到侧边栏,导致每次打开eclipse都要进入到相应目录,很麻烦.我们可以通过如下方法设置eclipse ...

  8. 2. Spring Boot Controller

    转自:https://blog.csdn.net/catoop/article/details/50501676

  9. 2.1 Vue组件

    Vue组件 全局组件和局部组件 父子组件通讯-数据传递 父->子:通过Props传递 子->父:不允许,但vue通过子组件触发Emit来提交给子组件进行触发 Slot import Cou ...

  10. 【 Codeforces Round #430 (Div. 2) A 】 Kirill And The Game

    [链接]点击打开链接 [题意] 水题 [题解] 枚举b从x..y看看k*i是不是在l..r之间就好. [错的次数] 0 [反思] 在这了写反思 [代码] #include <cstdio> ...