[Angular2] Build reuseable template with ngTemplateOutlet
We can build a template, use this template and pass in different context to make it reuseable:
<template #foo let-name="name" let-skills="skills">
<h4>{{name}}</h4>
<ul>
<li *ngFor="let s of skills">{{s}}</li>
</ul>
</template> <div [ngTemplateOutlet]="foo"
[ngOutletContext]="msg1">
</div>
<div [ngTemplateOutlet]="foo"
[ngOutletContext]="msg2">
</div>
msg1;
msg2; constructor() {
this.msg1 = {
name: "Zhentian",
skills: ["JS", "Angular"]
};
this.msg2 = {
name: "Wan",
skills: ["JSX", "React"]
};
}

[Angular2] Build reuseable template with ngTemplateOutlet的更多相关文章
- cnpm install 之后 Angular2 Build --prod 报错
95% emittingUnhandled rejection Error: ENOENT: no such file or directory, open 'E:\git_0.28\adminTem ...
- Vue.js 2.x Development Build With Hot Reloading For External Server (using Webpack template)
This article assuming you created your project using webpack template. vue init webpack <PROJECT_ ...
- angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用
今天我们要讲的是ng2的路由系统. 例子
- 理解 angular2 基础概念和结构 ----angular2系列(二)
前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...
- angular2 学习笔记 ( Component 组件)
refer : https://angular.cn/docs/ts/latest/guide/template-syntax.html https://angular.cn/docs/ts/late ...
- rebar自定义template
在开发过程中rebar自带模板建立项目,或多或少不能满足自己的开发需求.本人又是那种懒人,所以就要想办法偷懒.查看了priv模板 打造适合自己的项目模板.下面我简单的介绍整个模板的打造过程. 准备过程 ...
- Vue项目二、vue-cli2.x脚手架搭建build文件夹及config文件夹详解
build文件夹下 build.js 'use strict' // js的严格模式 require('./check-versions')() // node和npm的版本检查 process.en ...
- jQuery-template.js学习
花了点时间,看了下jQuery-template.js,不多废话,先上结构 jQuery.each({..},function(){}) jQuery.fn.extend({..}) jQuery.e ...
- C#之发送邮件【模板】+【封装】ZJ版
PS: 为了弥补上篇博客的不足,正好周六闲着没事.所以进行优化下,来个终结版 功能实现:模板发送+自指定邮箱发送+解耦 总体预览如下: 各代码如下:(代码略多,所以都折叠了) 前台; @{ Layou ...
随机推荐
- 程序中为什么会使用while(0)
https://blog.csdn.net/u012062760/article/details/46446207 关于while(0)实际上是用来宏定义的,这样的宏定义可以避免调用的时候出错. 如下 ...
- 初学h5须知
9.41.浏览器是页面的环境(类似水是鱼的环境)2.浏览器结构:title 标题,题目 URL 网址 ...
- ABAP调用外部WebService
TCode:se80 选择 Package,输入我们自己的开发包,后回车 右击 开发包名称,选择菜单 出现创建向导窗体 选择"Service Consumer",点击 继续 选择& ...
- 用openssl生成含有中文信息的证书
openssl 支持 ASCII 和 UTF-8 两种编码,应该可以制作中文证书. 在生成证书签发申请时,当输入中文则 openssl 报错,这是因为当前输入的字符是 ANSI 本地编码格式,超出了 ...
- 对AWS的计费有点糊涂
对AWS的计费有点糊涂 今天收到亚马逊的账单,就两笔 1. US West (Oregon) Region Elastic IP Addresses $0.005 per Elastic IP ...
- java中goto语句
goto是java中一个保留字,但在语言中并未使用它. goto语句起源于汇编语言的程序控制,是源码级上的跳跃,这使其招致了不好的声誉,若一个程序总是从一个地方跳转到另一个地方, 还有什么办法能识别程 ...
- 如果输入的不是英文字母或者数字或者汉字,则返回false
public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_C ...
- angularjs 合并单元格
Html: <table class="table table-striped"> <thead> <tr> <th>国家</ ...
- codeforces 1037E. Trips(倒叙)
题目传送门: 解题思路: 正着搞好像有点恶心. 反着搞. 一边删一边搞,从崩坏的地方开始,入度--. 最后dfs崩坏,更新答案. 注意要把边删掉防止重复崩坏. 代码: #include<cstd ...
- <link rel="shortcut icon" href="Xubuntu.ico" type="image/x-icon" /> <LINK href="Xubuntu.ico" rel="shortcut icon"> <link href="Xubuntu.ico" rel="B
<link rel="shortcut icon" href="Xubuntu.ico" type="image/x-icon" /& ...