[Angular 2] Create template with Params
Angular 2 templates have a special let
syntax that allows you to define and pass a context
when they’re being generated.
import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, ViewChild} from '@angular/core';
import {SimpleService} from "../../serivces/simple.service";
import {WidgetThree} from "../widgets/widget-three.component"; @Component({
moduleId: module.id,
selector: 'home',
templateUrl: 'home.component.html'
})
export class HomeComponent { @ViewChild('container', {
read: ViewContainerRef
}) container;
@ViewChild('template') template; constructor(private resolver: ComponentFactoryResolver, private simpleService: SimpleService) {
} ngAfterContentInit(){
const WidgetFactory = this.resolver.resolveComponentFactory(WidgetThree);
this.container.createComponent(WidgetFactory);
this.container.createComponent(WidgetFactory);
this.container.createComponent(WidgetFactory);
this.container.createComponent(WidgetFactory);
this.container.createComponent(WidgetFactory);
} onClick(){
this.container.createEmbeddedView(
this.template,
{
desc: 'Good'
}
)
} }
We pass in an Object "desc: Good", to the template, in tempalte, we use "let-" keyword to define the variable which we can reference to, and the object will be the 'context' for the template.
<template #template let-desc="desc">
<h3>tempalte {{desc}}</h3>
<section>tempalte {{desc}}</section>
<footer>template {{desc}}</footer>
</template>
[Angular 2] Create template with Params的更多相关文章
- R12: How to add Microsoft Excel as Type to the Create Template List of Values in BI Publisher (Doc ID 1343225.1)
Modified: 27-Oct-2013 Type: HOWTO In this Document Goal Solution References APPLIES TO: BI Publisher ...
- [Angular Directive] Create a Template Storage Service in Angular 2
You need to define a <template> to be able to use it elsewhere in your app as a TemplateRef. Y ...
- [Angular 2] Create Shareable Angular 2 Components
Components that you use across multiple applications need to follow a module pattern that keeps them ...
- [Angular 2] Create Angular 2 Porject with Angular CLI
Install: npm i -g angular-cli Create a project: ng new hello-angular2 Run the project: cd hello-angu ...
- [Angular 2] Create a simple search Pipe
This lesson shows you how to create a component and pass its properties as it updates into a Pipe to ...
- [Angular 2] Passing Template Input Values to Reducers
Angular 2 allows you to pass values from inputs simply by referencing them in the template and passi ...
- [Angular 2] Share Template Content In Another Template With Content Projection <ng-content>
Angular 1 provided a mechanism to place content from your template inside of another template called ...
- [Angular] Test component template
Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular ...
- 对angular实现延迟加载template和controller
1.在lib目录中添加 script.js 文件,并在index.html其他<script>之前引用之: <script src="lib/script.js" ...
随机推荐
- cocos2dx 2.x版本:简化提炼tolua++绑定自定义类到lua中使用
cocos2dx的3.x版本已经提供了更好地绑定方式,网上有很多相关的教程,这里给一个链接:http://www.cocoachina.com/bbs/read.php?tid=196416. 由于目 ...
- 提问:"~"运算符
本人有一段代码关于"~"运算符 public class m{ public static void main(String[] args){ int x=~5; System.o ...
- shell 中awk、if while 例子
1.if while命令写在一行中while read a b;do echo $a $b;done < aa.txt12 13 14cat aa.txt12 13 14if [[ $i -eq ...
- hadoop2.6.0 --- 64位源代码
今天有朋友在群里找hadoop最新的2.6.0的源代码,其实这个源代码在hadoop的官方网站是有下载的(应该是32位的),还有一个src,不过给的是maven版本,需要自己在机器上编译一下(我的机器 ...
- 《Java数据结构与算法》笔记-CH4-6栈结构实现中缀转后缀
/** * 中缀表达式转换成后缀表达式: 从输入(中缀表达式)中读取的字符,规则: 操作数: 写至输出 左括号: 推其入栈 右括号: 栈非空时重复以下步骤--> * 若项不为(,则写至输出: 若 ...
- Apache Spark的部署环境的小记
Spark的单机版便于测试,同时通过SSH用Spark的内置部署脚本搭建Spark集群,使用Mesos.Yarn或者Chef来部署Spark.对于Spark在云环境中的部署,比如在EC2(基本环境和E ...
- USB -- scsi命令集
摘自:<圈圈教你玩usb> 241页 SCSI(small computer system interface)是小型计算机系统的缩写,有一套完整的协议规定其命令和命令数据的响应.scsi ...
- SQLCONNECTION使用HTTP通信协议和中间件连接
SQLCONNECTION支持TCP/IP和HTTP两种通信协议和中间件连接.一般地,默认情况下使用TCP/IP协议. HTTP 协议的一个非常重要的优势在于穿越防火墙. SQLCONNECTION使 ...
- (高精度运算4.7.21)UVA 10106 Product(大数乘法)
package com.njupt.acm; import java.math.BigInteger; import java.util.Scanner; public class UVA_10106 ...
- POJ3974 Palindrome (manacher算法)
题目大意就是说在给定的字符串里找出一个长度最大的回文子串. 才开始接触到manacher,不过这个算法的确很强大,这里转载了一篇有关manacher算法的讲解,可以去看看:地址 神器: #includ ...