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. VMware Vsphere 6.0安装部署 总体部署架构

    (一)总体部署架构 本教程用于学习目的,力求详尽的介绍安装部署过程和各组件之间的关系,部署过程从最简单的模型开始,系列文章按时间顺序依次展开,每篇介绍一个组件. 开始阶段,按照一台物理服务器,部署所有 ...

  2. tree ---树状显示

    tree命令以树状图列出目录的内容. 语法 tree(选项)(参数) 选项 -a:显示所有文件和目录: -A:使用ASNI绘图字符显示树状图而非以ASCII字符组合: -C:在文件和目录清单加上色彩, ...

  3. mkfs---创建Linux文件系统

    [root@xiaolizi ~]# mkfsmkfs mkfs.btrfs mkfs.cramfs mkfs.ext2 mkfs.ext3 mkfs.ext4 mkfs.minix mkfs.xfs ...

  4. POJ 4047 Garden

    Garden Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID: 404 ...

  5. inode与ln命令

    inode可以看: http://www.cnblogs.com/itech/archive/2012/05/15/2502284.html 每个inode节点的大小,一般是128字节或256字节.i ...

  6. linux 命令之 tar

    作用 tar命令是Unix/Linux系统中备份文件的可靠方法.差点儿能够工作于不论什么环境中,它的使用权限是全部用户. 语法: tar [主选项+辅选项] 文件或文件夹 主选项: c 创建新的归档文 ...

  7. 一起talk C栗子吧(第三十四回:C语言实例--巧用溢出计算最值)

    各位看官们.大家好,上一回中咱们说的是巧用移位的样例,这一回咱们说的样例是:巧用溢出计算最值. 闲话休提,言归正转.让我们一起talk C栗子吧! 大家都知道,程序中的变量都有一个取值范围,这个范围也 ...

  8. CSS3制作W3cplus的关注面板

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  9. 2. Dubbo和Zookeeper的关系

    转自:https://www.cnblogs.com/hirampeng/p/9540243.html Dubbo建议使用Zookeeper作为服务的注册中心. 1.   Zookeeper的作用: ...

  10. 1.10 Python基础知识 - 序列:列表

    在Python中有很多的组合数据类型,其中包括列表,元组,字符串等数据类型,这些数据类型统称为序列类型,用他们可以处理复杂的数据. 列表,是一组有序元素组合的数据结构.列表是可变的数据类型. 列表采用 ...