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. 21. Node.Js Buffer类(缓冲区)-(一)

    转自:https://blog.csdn.net/u011127019/article/details/52512242

  2. Android 安卓直播开源: RTMP 推流SDK

    前些日子在github上提交了基于GPUImage的iOS直播推流SDK(https://github.com/runner365/GPUImageRtmpPush) 最近整理了Android直播推流 ...

  3. c#的中英文混合字符串截取 public static string SubString(string inputString, int byteLength)

    /// <summary>        /// c#的中英文混合字符串截取(区分中英文)        /// </summary>        /// <param ...

  4. js上传文件(图片)的格式和大小限制

    如果你想快速解决这个问题,看本文就够了.查了好多资料,终于解决了,太耗时间了,本文留给给后来者,希望你们工作的更轻松 本文保存为.html文件用浏览器打开即可测试功能 <form id=&quo ...

  5. 在 Android* 商务应用中实施地图和地理围栏特性

    摘要 本案例研究讨论了怎样将地图和地理定位特性构建到 Android* 商务应用中.包含在 Google Maps* 上覆盖商店位置,以及在设备进入商店地理围栏邻近区域时借助地理围栏通知用户. 文件夹 ...

  6. 九度OJ—题目1032:ZOJ

    题目描写叙述: 读入一个字符串.字符串中包括ZOJ三个字符,个数不一定相等,按ZOJ的顺序输出.当某个字符用完时,剩下的仍然依照ZOJ的顺序输出. 输入: 题目包括多组用例,每组用例占一行,包括ZOJ ...

  7. Android触摸事件(五)-CropBitmapActivity关于裁剪工具的使用

    文件夹 文件夹 概述 传递数据 裁剪流程 其他事项 使用方式 图片辅助功能 图片缩略图载入 图片旋转 源代码 GitHub地址 演示样例GIF 概述 这个Activity是为了裁剪图片的.使用时须要提 ...

  8. Android RecyclerView嵌套RecyclerView

    原理 RecyclerView嵌套RecyclerView的条目,项目中可能会经常有这样的需求,但是我们将子条目设置为RecyclerView之后,却显示不出来.自己试了很久,终于找到了原因:必须先设 ...

  9. 有关Canvas的一点小事—canvas数据和像素点

    1.  canvas生成base64数据 canvas.toDataURL()生成的数据可以直接给image对象使用作为<img>显示在前端,也可以传给后台生成图片保存.前端生成保存图片的 ...

  10. CSS外边距合并(塌陷/margin越界)

    原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...