[Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2
*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.<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的更多相关文章
- AngularJS.directive系列:嵌套directive的通讯及scope研究
一.directive中的scope directive无疑是AngularJS中比较复杂难懂的部分,而directive中个scope更是其中最复杂的部分了,尤其是在嵌套directive中互相通讯 ...
- Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块
传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...
- DYNAMIC CONTEXT SWITCHING BETWEEN ARCHITECTURALLY DISTINCT GRAPHICS PROCESSORS
FIELD OF INVENTION This invention relates to computer graphics processing, and more specifically to ...
- [译]Exploring Angular 1.3: Binding to Directive Controllers
原文: http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html Angul ...
- Angular学习(8)- directive
<!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 9</ti ...
- [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 ...
- [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 ...
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- [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 ...
随机推荐
- POJ 3602 Typographical Ligatures
[题意简述]:题意就是输入一串字符串,问我们有多少种不同的字符,也就是说出现过一次的字符,下次就不记到种数中了,特别的有 ff, fi ,fl ,ffi ,ffl,'',``, 这几个每一个算是一种 ...
- Repository 仓储,你的归宿究竟在哪?(上)
Repository 仓储,你的归宿究竟在哪?(上) 写在前面 写这篇博文的灵感来自<如何开始DDD(完)>,很感谢young.han兄这几天的坚持,陆陆续续写了几篇有关于领域驱动设计的博 ...
- DDD(领域驱动设计)应对具体业务场景,如何聚焦 Domain Model(领域模型)?
DDD(领域驱动设计)应对具体业务场景,如何聚焦 Domain Model(领域模型)? 阅读目录: 问题根源是什么? <领域驱动设计-软件核心复杂性应对之道>分层概念 Repositor ...
- quartz_spring 定时器配置
quartz:石英,表达精确准时的意思. quartz-all-1.6.1.jar 主要用于定时任务管理. <?xml version="1.0" encoding=&quo ...
- 关于如何惟一地标识一台Android设备的综合性讨论
想必大家在开发Android项目的时候,多多少少会遇到“如何惟一地标识一台Android设备”等类似的问题.不只是以前,即使是现在乃至可以预见的将来,这个问题都将一直存在. 如果大家使用搜索工具搜索的 ...
- Effective C++(11) 自我赋值(a=a)时会发生什么?
问题聚焦: 自我赋值看似有点愚蠢的行为,其实总会发生的 首先:它是合法的, 其次,它不一定是安全的, 再次,它有时候不是那么明显. 先看一个Demo class Widget { ... }; Wid ...
- 由于检索用户的本地应用程序数据路径时出错,导致无法生成 SQL Server 的用户实例
/”应用程序中的服务器错误. 由于检索用户的本地应用程序数据路径时出错,导致无法生成 SQL Server 的用户实例.请确保该用户在此计算机上有本地用户配置文件.该连接将关闭. 堆栈跟踪: [Sql ...
- Working with Entity Relations in OData
Working with Entity Relations in OData 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs. ...
- PureMVC(JS版)源码解析
PureMVC(JS版)源码解析:总结 PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写 ...
- WPF中StackPanel的使用方法
StackPanel 1.StackPanel:释义为是最简单的控制面板,它把其中的UI元素按横向或纵向堆积排列. 2.常用属性:width:获取或设置元素的宽度.Orientation:用于控制面板 ...