Just like passing in an array to *ngFor, you can pass in any value into your structural directive so that it can render templates based on those values. It's crucial to understand how the *directive syntax expands into a <template> and adds a custom @Input based on the syntax you use so that you can use your own data.
 
 
The syntax looks like:
<h2 *three="let message from messages">{{message.to}} - {{message.message}}</h2>

For template it would looks like:

<template [threeFrom]="messages"></template>

It combimes 'three' and 'from' keywords.

So the directive would looks like:

import {Directive, Input, TemplateRef, ViewContainerRef} from "@angular/core";
@Directive({
selector: '[three]'
})
export class ThreeDirective {
@Input() set threeFrom({one, two, three}) {this.view.createEmbeddedView(this.template, {
$implicit: {
to: "People" + Math.random(),
message: two
}
}); this.view.createEmbeddedView(this.template, {
$implicit: {
to: "People" + Math.random(),
message: three
}
}); this.view.createEmbeddedView(this.template, {
$implicit: {
to: "People" + Math.random(),
message: one
}
});
} constructor(private template: TemplateRef<any>, private view: ViewContainerRef) { }
}
 

[Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2的更多相关文章

  1. AngularJS.directive系列:嵌套directive的通讯及scope研究

    一.directive中的scope directive无疑是AngularJS中比较复杂难懂的部分,而directive中个scope更是其中最复杂的部分了,尤其是在嵌套directive中互相通讯 ...

  2. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  3. DYNAMIC CONTEXT SWITCHING BETWEEN ARCHITECTURALLY DISTINCT GRAPHICS PROCESSORS

    FIELD OF INVENTION This invention relates to computer graphics processing, and more specifically to ...

  4. [译]Exploring Angular 1.3: Binding to Directive Controllers

    原文: http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html Angul ...

  5. Angular学习(8)- directive

    <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 9</ti ...

  6. [AngularJS - thoughtram] Exploring Angular 1.3: Binding to Directive Controllers

    The post we have: http://www.cnblogs.com/Answer1215/p/4185504.html gives a breif introduce about bin ...

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

  8. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

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

随机推荐

  1. POJ 3602 Typographical Ligatures

    [题意简述]:题意就是输入一串字符串,问我们有多少种不同的字符,也就是说出现过一次的字符,下次就不记到种数中了,特别的有  ff, fi ,fl ,ffi ,ffl,'',``, 这几个每一个算是一种 ...

  2. Repository 仓储,你的归宿究竟在哪?(上)

    Repository 仓储,你的归宿究竟在哪?(上) 写在前面 写这篇博文的灵感来自<如何开始DDD(完)>,很感谢young.han兄这几天的坚持,陆陆续续写了几篇有关于领域驱动设计的博 ...

  3. DDD(领域驱动设计)应对具体业务场景,如何聚焦 Domain Model(领域模型)?

    DDD(领域驱动设计)应对具体业务场景,如何聚焦 Domain Model(领域模型)? 阅读目录: 问题根源是什么? <领域驱动设计-软件核心复杂性应对之道>分层概念 Repositor ...

  4. quartz_spring 定时器配置

    quartz:石英,表达精确准时的意思. quartz-all-1.6.1.jar 主要用于定时任务管理. <?xml version="1.0" encoding=&quo ...

  5. 关于如何惟一地标识一台Android设备的综合性讨论

    想必大家在开发Android项目的时候,多多少少会遇到“如何惟一地标识一台Android设备”等类似的问题.不只是以前,即使是现在乃至可以预见的将来,这个问题都将一直存在. 如果大家使用搜索工具搜索的 ...

  6. Effective C++(11) 自我赋值(a=a)时会发生什么?

    问题聚焦: 自我赋值看似有点愚蠢的行为,其实总会发生的 首先:它是合法的, 其次,它不一定是安全的, 再次,它有时候不是那么明显. 先看一个Demo class Widget { ... }; Wid ...

  7. 由于检索用户的本地应用程序数据路径时出错,导致无法生成 SQL Server 的用户实例

    /”应用程序中的服务器错误. 由于检索用户的本地应用程序数据路径时出错,导致无法生成 SQL Server 的用户实例.请确保该用户在此计算机上有本地用户配置文件.该连接将关闭. 堆栈跟踪: [Sql ...

  8. Working with Entity Relations in OData

    Working with Entity Relations in OData 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs. ...

  9. PureMVC(JS版)源码解析

    PureMVC(JS版)源码解析:总结   PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写 ...

  10. WPF中StackPanel的使用方法

    StackPanel 1.StackPanel:释义为是最简单的控制面板,它把其中的UI元素按横向或纵向堆积排列. 2.常用属性:width:获取或设置元素的宽度.Orientation:用于控制面板 ...