[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++中的左值和右值
左值和右值的定义 在C++中,能够放到赋值操作符=左边的是左值,能够放到赋值操作符右边的是右值.有些变量既能够当左值又能够当右值.进一步来讲,左值为Lvalue,事实上L代表Location,表示在内 ...
- highchart几个图表马金摘要
1) Js的引入顺序不对,导致highchart的图表出不来. 由于Highchart插件中用到了jquery,jquery的js要在引入highchart的js之前引入,否则当会导致当载入high ...
- leetcode[105] Construct Binary Tree from Inorder and Postorder Traversal
代码实现:给定一个中序遍历和后序遍历怎么构造出这颗树!(假定树中没有重复的数字) 因为没有规定是左小右大的树,所以我们随意画一颗数,来进行判断应该是满足题意的. 3 / \ 2 4 /\ / \1 6 ...
- git简单教材
0)初始化 $ git config --global user.name "xxx" $ git config --global user.email "xxx@gma ...
- 读书笔记—CLR via C#字符串及文本
前言 这本书这几年零零散散读过两三遍了,作为经典书籍,应该重复读反复读,既然我现在开始写博了,我也准备把以前觉得经典的好书重读细读一遍,并且将笔记整理到博客中,好记性不如烂笔头,同时也在写的过程中也可 ...
- 代码审查 (Google牛人谈Code Review)
代码审查 (Google牛人谈Code Review) 在上一篇博客里我暗示自己将不在为Google工作. 我还没有决定好去哪儿-有几个非常不错的工作机会让我选择.鉴于这段时间内我不受雇于任何公司,我 ...
- Unkown2
续上个unkown,这里mark一下,接下来觉得还有可能考到,且自己不会的东西(或不太会) 数学方面: 随机化,概率,简单的几何计算,杂七杂八的数论,组合数学中的差分,康托展开,高斯消元,线性规划 树 ...
- intellij idea 学习
intellij idea是一个java的ide.由jetbrain开发. intellij idea快捷键 快捷键 说明 备注 Ctrl+N 快速导航到类 类似于Resharper中的C ...
- fastcgi重启
重启nginx和php-cgi 的命令 nginx: sudo /etc/init.d/nginx restart 同样也可以有start,stop等参数php-cgi: 先杀死进程sudo kill ...
- [转]iOS Anti-Debugging Protections
source-1: http://www.coredump.gr/articles/ios-anti-debugging-protections-part-1/ source-2: http://ww ...