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的更多相关文章

  1. angular学习(二)—— Data Binding

    转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/51182106 Data Binding 在angular中.model和vie ...

  2. [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 ...

  3. [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 ...

  4. [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 ...

  5. Angular之 Scope和 Directive

    ---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...

  6. angular的GitHub Repository Directive Example学习

    angular的GitHub Repository Directive Example学习 <!DOCTYPE html> <html ng-app="myApp" ...

  7. Angular自定义指令(directive)

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  8. angular自定义指令-directive

    Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html.js封装在一起,形成一个可复用的独立个体,具体特定的功能.下面我们来详细解读一下Directive的一般性用法. v ...

  9. angularJS 中的two-way data binding.

    原文: https://stackoverflow.com/questions/11616636/how-to-do-two-way-filtering-in-angularjs ---------- ...

随机推荐

  1. 读书笔记—CLR via C#委托和attribute

    前言 这本书这几年零零散散读过两三遍了,作为经典书籍,应该重复读反复读,既然我现在开始写博了,我也准备把以前觉得经典的好书重读细读一遍,并且将笔记整理到博客中,好记性不如烂笔头,同时也在写的过程中也可 ...

  2. 【转】Android的Merge讲解与实例

    原文:http://blog.sina.com.cn/s/blog_62f987620100sf13.html 单独将<merge />标签做个介绍,是因为它在优化UI结构时起到很重要的作 ...

  3. Windows 7上使用HP QC的问题

    C(Quantity Center)是一款不错的测试管理工具,最近把公司的操作系统从Windows XP升级到Windows 7之后,发现登录到QC Server的Addin页面,很多客户端组件不能正 ...

  4. beanutils通过SimpleProperty使用get或set方法赋值

    public class Employee { private String  firstName;    private String lastName;    public Employee() ...

  5. 总结windows多线程同步互斥

    windows多线程同步互斥--总结 我的windows多线程系列文章: windows多线程--原子操作 windows多线程同步--事件 windows多线程同步--互斥量 windows多线程同 ...

  6. Step one : 熟悉Unix/Linux Shell 常见命令行 (一)

    1.文件系统结构和基本操作 ls  - - list directory contents -a/A 列出全部文件(包含隐藏文件) - i 列出inode号码 -n 查看UID and GID -d ...

  7. EditPlus 3设置字体大小

    EditPlus设置字体大小 tools ---> preferences ---> fonts

  8. Web API 2中的属性路由

    Web API 2中的属性路由 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.ht ...

  9. noip模拟赛:部队[技巧?思想?]

    王国军总指挥——卡西乌斯准将决定重建情报局,需要从全国各地挑选有能力的士兵,选择的标准为A,B两种能力.对于每个候选士兵,如果存在另一名士兵的两项能力均大于等于他,那么他将被淘汰.(注意:若两名士兵两 ...

  10. Moq & RhinoMocks

    Moq & RhinoMocks 使用Mock对象进行测试一般都会有以下三个关键步骤: 使用接口来描述需要测试的对象 为实际的产品代码实现这个接口 以测试为目的,在Mock对象中实现这个接口 ...