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的更多相关文章

  1. cnpm install 之后 Angular2 Build --prod 报错

    95% emittingUnhandled rejection Error: ENOENT: no such file or directory, open 'E:\git_0.28\adminTem ...

  2. 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_ ...

  3. angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用

    今天我们要讲的是ng2的路由系统. 例子

  4. 理解 angular2 基础概念和结构 ----angular2系列(二)

    前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...

  5. angular2 学习笔记 ( Component 组件)

    refer : https://angular.cn/docs/ts/latest/guide/template-syntax.html https://angular.cn/docs/ts/late ...

  6. rebar自定义template

    在开发过程中rebar自带模板建立项目,或多或少不能满足自己的开发需求.本人又是那种懒人,所以就要想办法偷懒.查看了priv模板 打造适合自己的项目模板.下面我简单的介绍整个模板的打造过程. 准备过程 ...

  7. Vue项目二、vue-cli2.x脚手架搭建build文件夹及config文件夹详解

    build文件夹下 build.js 'use strict' // js的严格模式 require('./check-versions')() // node和npm的版本检查 process.en ...

  8. jQuery-template.js学习

    花了点时间,看了下jQuery-template.js,不多废话,先上结构 jQuery.each({..},function(){}) jQuery.fn.extend({..}) jQuery.e ...

  9. C#之发送邮件【模板】+【封装】ZJ版

    PS: 为了弥补上篇博客的不足,正好周六闲着没事.所以进行优化下,来个终结版 功能实现:模板发送+自指定邮箱发送+解耦 总体预览如下: 各代码如下:(代码略多,所以都折叠了) 前台; @{ Layou ...

随机推荐

  1. POJ 1269 Intersecting Lines 直线交

    不知道谁转的计算几何题集里面有这个题...标题还写的是基本线段求交... 结果题都没看就直接敲了个线段交...各种姿势WA一遍以后发现题意根本不是线段交而是直线交...白改了那个模板... 乱发文的同 ...

  2. layui动态无限极菜单

    ajax加jQuery实现 效果图 参考文章:https://www.wanpishe.top/detail?blogId=644aa177-9795-456a-8090-ee1264bf5d9d

  3. BOM 请给javascript一个说法-------Day33

    楼市低迷,业主是不是该要个说法.黄金暴跌,谁来给大妈们一个说法.中国足球,敢不敢给大家一个说法. 给个说法,谁给,给谁,这该是哲学的范畴了吧. 可是,在这里.BOM是真真切切的给javascript一 ...

  4. 购买VPS时机房的选择

    购买VPS时机房的选择 对于配置差不多的VPS,距离越近的一般网速越快,所以有必要使用谷歌地图,查看城市的所在位置 比如ChicagoVPS,不时有邮件销售它的VPS,虽然说不上怎么好,但是一般的使用 ...

  5. 使用SqlBulkCopy进行批量数据插入

    Dim dt As DataTable = New DataTable() dt.Columns.Add("DtCostProductRuleGUID", GetType(Guid ...

  6. 基于Linux系统的Nagios网络管理模块的实现

    基于Linux 系统的Nagios网络管理模块的实现 1.引言 随着计算机网络的普及,网络管理已成为信息时代中最重要的问题之一.在现有的技术条件下,人们希望有一个更加稳定可靠的网络环境.计算机网络管理 ...

  7. golang API 例子实现

    golang API 例子实现 http://files.cnblogs.com/files/rojas/astaxie.zip

  8. vim学习3

    可视模式:

  9. 【hdu 6181】Two Paths

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6181 [题意] 让你求从1到n的次短路 [题解] 模板题; 因为点可以重复走; 则一定会有次短路. di ...

  10. SSO单点登录学习总结(2)——基于Cookie+fliter单点登录实例

    1.使用Cookie解决单点登录 技术点: 1.设置Cookie的路径为setPath("/").即Tomcat的目录下都有效 2.设置Cookie的域setDomain(&quo ...