[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 ...
随机推荐
- BZOJ 3456 城市规划 ( NTT + 多项式求逆 )
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=3456 题意: 求出\(n\)个点的简单(无重边无自环)无向连通图的个数.(\(n< ...
- Android 多线程下载,断点续传,线程池
你可以在这里看到这个demo的源码: https://github.com/onlynight/MultiThreadDownloader 效果图 这张效果图是同时开启三个下载任务,限制下载线程数量的 ...
- fromCharCode vs chr
fromCharCode vs chr echo off set "fn=%*" set php=d:/www/php5/php.exe cls echo. %php% %fn% ...
- VPS 的 CentOS6 升级 Python 的方法
VPS 的 CentOS6 升级 Python 的方法 centos默认安装python2.6.由于python和centos关联紧密,所以不建议卸载,进行编译升级 1.新开的VPS务必系统更新 yu ...
- golang recover panic 流程控制的可达与不可达
--------------------------流程控制可达----------------------------- package main import "fmt" fu ...
- 绝对定位等html结构,水平居中的处理方案
1.父子结构,父relative,子absolute.子元素要水平居中:left:50%:margin-left:子元素一半的宽度.因为定位的left是按左边框开始计算.[固定问题的模块化解决]
- Django的命令
安装django : pip install django 创建django项目 :django-admin startproject projectname 启动django项 ...
- 如何去掉bootstrap table中表格样式中横线竖线
修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...
- SoapUI、Jmeter、Postman三种接口测试工具的比较分析——灰蓝
前段时间忙于接口测试,也看了几款接口测试工具,简单从几个角度做了个比较,拿出来与诸位分享一下吧.各位如果要转载,请一定注明来源,最好在评论中告知博主一声,感谢.本报告从多个方面对接口测试的三款常用工具 ...
- 洛谷 P2755 洗牌问题
P2755 洗牌问题 题目描述 给你2N张牌,编号为1,2,3..n,n+1,..2n.这也是最初的牌的顺序. 一次洗牌是把序列变为n+1,1,n+2,2,n+3,3,n+4,4..2n,n.可以证 ...