[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 ...
随机推荐
- popover弹出框
<style> #view{width: 300px;height: 200px;border: 1px solid red;} </style> 以上是为了viewport更 ...
- Java学习笔记四
1.简介.进程和线程:简单的说就是进程负责为程序开辟内存空间,线程负责具体的执行单元(执行路径). 一个进程中可以有多个执行路径,称为多线程.CPU一次只能执行一个进程,但是一个进程内部可以有多个线程 ...
- BZOJ1009: [HNOI2008]GT考试(KMP+矩阵乘法)
Description 阿申准备报名参加GT考试,准考证号为N位数X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字.他的不吉利数学A1A2...Am(0< ...
- 解决sublime text3配置Python3编译环境:运行代码时提示“NO Build System”
只需要在路径中把单杠换成双杠,重启sublime即可.
- [NPM] Publish npm packages using npm publish
In this lesson we will publish our package. We will first add a prepublish script that runs our buil ...
- [D3] Draw a basic US d3-geo map
Install: npm install --save d3 d3-geo topojson Code: import React, {Component} from 'react'; import ...
- 洛谷 P1808 单词分类_NOI导刊2011提高(01)
P1808 单词分类_NOI导刊2011提高(01) 题目描述 Oliver为了学好英语决定苦背单词,但很快他发现要直接记住杂乱无章的单词非常困难,他决定对单词进行分类. 两个单词可以分为一类当且仅当 ...
- 下次自己主动登录(记住password)功能
1:进入cookie插件 <script src="jquery.cookie.js" type="text/javascript"></sc ...
- poj 1191 棋盘切割 (压缩dp+记忆化搜索)
一,题意: 中文题 二.分析: 主要利用压缩dp与记忆化搜索思想 三,代码: #include <iostream> #include <stdio.h> #include & ...
- 1.2 Python基础知识 - 字符编码
计算机中的数据是以二进制方式进行存储的,即只有"0"和"1",二进制是属于数据类型的数据,它只可以和其他进制的数据类型进行转换,但是不能存储其他字符,例如:字母 ...