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. C# File类的操作

    原文:C# File类的操作 File类,是一个静态类,主要是来提供一些函数库用的.静态实用类,提供了很多静态的方法,支持对文件的基本操作,包括创建,拷贝,移动,删除和打开一个文件.File类方法的参 ...

  2. ubuntu12.04 内核编译 记录

    近期学习linux这门课,做实验要编译系统内核,然后..五一没事就捣鼓了一上午,还好成功了,以下就写下过程吧. 注意:以下过程的有些make 这类的命令 可能要获取权限 1.開始时能够查一下自己如今系 ...

  3. cocos2d-x的TestCpp分析

    最近,我刚开始学coco2d-x 我会写我的学习经验来 首先TestCppproject有许多例子文件夹,而在这些文件夹以外的其他文件 .我首先研究这些文件: controller.h/cpp:管理方 ...

  4. Lucene.net入门学习

    Lucene.net入门学习(结合盘古分词)   Lucene简介 Lucene是apache软件基金会4 jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,即它不是一个完整的全 ...

  5. hudson任务配置说明

    hudson任务配置说明 Discard Old Builds:hudson默认保留过去的构建,勾选此选项,则可以设置构建记录的有效期: (帮助:这里控制着您想要在hudson所在的磁盘把构建记录存储 ...

  6. 用javascript实现2048的小游戏

    前段时间,看了一个视频,用javascript实现的2048小游戏,发现不难,都是一些基出的语法和简单逻辑. 整个2048游戏没有很多的数据,所有,实现起来还是很有成就感的. 先上图,简直就和原版游戏 ...

  7. 在SQL Server中添加Linked Server 图解版

    在开发中,经常需要一个SQL Server服务器去访问另一个服务器,微软提供了一种方式Linked Server 下面是配置流程: 1).打开Server Objects下 Linked Server ...

  8. Java编程思想笔记(第二章)

    第二章  一切都是对象 尽管Java是基于C++的,但相比之下,Java是一种更纯粹的面向对象程序设计语言. c++和Java都是杂合型语言(hybird language) 用引用(referenc ...

  9. TOGAF架构能力框架之架构能力建设和架构治理

    TOGAF架构能力框架之架构能力建设和架构治理 为了确保架构功能在企业中能够被成功地运用,企业需要通过建立适当的组织结构.流程.角色.责任和技能来实现其自身的企业架构能力,而这也正是TOGAF的架构能 ...

  10. RTB撕开黑盒子 Part 2: Algorithm Meets World

    Part 0介绍了RTB的胜出价格会在凌晨陡升.我们还介绍了一个Pace系统,如果这个系统所有的DSPs都用,那陡升的问题就会消失.Part 0中的系统中含有一个隐式的假设:任何两个请求都认为是相同的 ...