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++中的左值和右值

    左值和右值的定义 在C++中,能够放到赋值操作符=左边的是左值,能够放到赋值操作符右边的是右值.有些变量既能够当左值又能够当右值.进一步来讲,左值为Lvalue,事实上L代表Location,表示在内 ...

  2. highchart几个图表马金摘要

    1)  Js的引入顺序不对,导致highchart的图表出不来. 由于Highchart插件中用到了jquery,jquery的js要在引入highchart的js之前引入,否则当会导致当载入high ...

  3. leetcode[105] Construct Binary Tree from Inorder and Postorder Traversal

    代码实现:给定一个中序遍历和后序遍历怎么构造出这颗树!(假定树中没有重复的数字) 因为没有规定是左小右大的树,所以我们随意画一颗数,来进行判断应该是满足题意的. 3 / \ 2 4 /\ / \1 6 ...

  4. git简单教材

    0)初始化 $ git config --global user.name "xxx" $ git config --global user.email "xxx@gma ...

  5. 读书笔记—CLR via C#字符串及文本

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

  6. 代码审查 (Google牛人谈Code Review)

    代码审查 (Google牛人谈Code Review) 在上一篇博客里我暗示自己将不在为Google工作. 我还没有决定好去哪儿-有几个非常不错的工作机会让我选择.鉴于这段时间内我不受雇于任何公司,我 ...

  7. Unkown2

    续上个unkown,这里mark一下,接下来觉得还有可能考到,且自己不会的东西(或不太会) 数学方面: 随机化,概率,简单的几何计算,杂七杂八的数论,组合数学中的差分,康托展开,高斯消元,线性规划 树 ...

  8. intellij idea 学习

      intellij idea是一个java的ide.由jetbrain开发.     intellij idea快捷键 快捷键 说明 备注 Ctrl+N 快速导航到类 类似于Resharper中的C ...

  9. fastcgi重启

    重启nginx和php-cgi 的命令 nginx: sudo /etc/init.d/nginx restart 同样也可以有start,stop等参数php-cgi: 先杀死进程sudo kill ...

  10. [转]iOS Anti-Debugging Protections

    source-1: http://www.coredump.gr/articles/ios-anti-debugging-protections-part-1/ source-2: http://ww ...