[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 by declaring the variable using a let
statement then passing context into the createEmbeddedView
call.
We know *ngFor we did like this:
*ngFor="let message of messages"
So how can we also do like this?
Remember that
<h1 *three="let messages"> <!-- Equal to --> <template let-messages></template>
import {Directive, Input, TemplateRef, ViewContainerRef} from "@angular/core";
@Directive({
selector: '[three]'
})
export class ThreeDirective {
@Input() set three(value) {
let num = 3; while (num--) {
const message = {
to: "People" + Math.random(),
message: "Hello" + Math.random()
};
this.view.createEmbeddedView(this.template, {
$implicit: message
})
}
} constructor(private template: TemplateRef<any>, private view: ViewContainerRef) { }
}
There to avoid change detection problem (value changed after compoennt inited). We need to point out after 'three' as an input.
<h2 *three="let message">{{message.to}} - {{message.message}}</h2>
[Angular Directive] Implement Structural Directive Data Binding with Context in Angular的更多相关文章
- angular学习(二)—— Data Binding
转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/51182106 Data Binding 在angular中.model和vie ...
- [Angular Directive] Write a Structural Directive in Angular 2
Structural directives enable you to use an element as a template for creating additional elements. C ...
- [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 ...
- [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 ...
- Angular之 Scope和 Directive
---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...
- angular的GitHub Repository Directive Example学习
angular的GitHub Repository Directive Example学习 <!DOCTYPE html> <html ng-app="myApp" ...
- Angular自定义指令(directive)
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- angular自定义指令-directive
Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html.js封装在一起,形成一个可复用的独立个体,具体特定的功能.下面我们来详细解读一下Directive的一般性用法. v ...
- angularJS 中的two-way data binding.
原文: https://stackoverflow.com/questions/11616636/how-to-do-two-way-filtering-in-angularjs ---------- ...
随机推荐
- C# File类的操作
原文:C# File类的操作 File类,是一个静态类,主要是来提供一些函数库用的.静态实用类,提供了很多静态的方法,支持对文件的基本操作,包括创建,拷贝,移动,删除和打开一个文件.File类方法的参 ...
- ubuntu12.04 内核编译 记录
近期学习linux这门课,做实验要编译系统内核,然后..五一没事就捣鼓了一上午,还好成功了,以下就写下过程吧. 注意:以下过程的有些make 这类的命令 可能要获取权限 1.開始时能够查一下自己如今系 ...
- cocos2d-x的TestCpp分析
最近,我刚开始学coco2d-x 我会写我的学习经验来 首先TestCppproject有许多例子文件夹,而在这些文件夹以外的其他文件 .我首先研究这些文件: controller.h/cpp:管理方 ...
- Lucene.net入门学习
Lucene.net入门学习(结合盘古分词) Lucene简介 Lucene是apache软件基金会4 jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,即它不是一个完整的全 ...
- hudson任务配置说明
hudson任务配置说明 Discard Old Builds:hudson默认保留过去的构建,勾选此选项,则可以设置构建记录的有效期: (帮助:这里控制着您想要在hudson所在的磁盘把构建记录存储 ...
- 用javascript实现2048的小游戏
前段时间,看了一个视频,用javascript实现的2048小游戏,发现不难,都是一些基出的语法和简单逻辑. 整个2048游戏没有很多的数据,所有,实现起来还是很有成就感的. 先上图,简直就和原版游戏 ...
- 在SQL Server中添加Linked Server 图解版
在开发中,经常需要一个SQL Server服务器去访问另一个服务器,微软提供了一种方式Linked Server 下面是配置流程: 1).打开Server Objects下 Linked Server ...
- Java编程思想笔记(第二章)
第二章 一切都是对象 尽管Java是基于C++的,但相比之下,Java是一种更纯粹的面向对象程序设计语言. c++和Java都是杂合型语言(hybird language) 用引用(referenc ...
- TOGAF架构能力框架之架构能力建设和架构治理
TOGAF架构能力框架之架构能力建设和架构治理 为了确保架构功能在企业中能够被成功地运用,企业需要通过建立适当的组织结构.流程.角色.责任和技能来实现其自身的企业架构能力,而这也正是TOGAF的架构能 ...
- RTB撕开黑盒子 Part 2: Algorithm Meets World
Part 0介绍了RTB的胜出价格会在凌晨陡升.我们还介绍了一个Pace系统,如果这个系统所有的DSPs都用,那陡升的问题就会消失.Part 0中的系统中含有一个隐式的假设:任何两个请求都认为是相同的 ...