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. kali之EtterCap学习

    EtterCap是一个基于ARP地址欺骗方式的网络嗅探工具,主要适用于交换局域网络.借助于EtterCap嗅探软件,渗透测试人员可以检测网络内明文数据通讯的安全性,及时采取措施,避免敏感的用户名/密码 ...

  2. 【MongoDB】mongodump and mongorestore of mogodb

    The another tool will be mentioned in this blog, namely mongodump and mongorestore. General speaking ...

  3. [ES6] Extends class in ES6 vs ES5 subclass

    ES6 class with extends and super: class Tree { constructor(size = ', leaves = {spring: 'green', summ ...

  4. ubuntu-文件管理、编辑

    1.创建单层文件夹 mkdir test 如果你想要创建多层文件夹,这时候你需要添加一个参数-p mkdir -p t1/t2/t3 如果你不加-p的话,它会提示说找不到目录 2.分屏查看内容 mor ...

  5. android-EditText 更改外边框无效

    修改的代码如下 <com.android.mms.ui.EnhanceEditText android:textColor="#000000" <!--问题处在这里,a ...

  6. 2. APIS官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 2. APIS .APIS Apache Kafka引入一个新的java客户端(在o ...

  7. C# Find() 与 FindAll()方法的使用

    Find()   :检索与指定匹配的第一个元素 FindAll()   : 检索与指定匹配的所有元素 如:List<string> strList=new List<string&g ...

  8. numpy_basic3

    矩陣 矩阵是numpy.matrix类类型的对象,该类继承自numpy.ndarray,任何针对多维数组的操作,对矩阵同样有效,但是作为子类矩阵又结合其自身的特点,做了必要的扩充,比如:乘法计算.求逆 ...

  9. Detecting a return-oriented programming exploit

    A method and apparatus for detecting a Return-Oriented Programming exploitation. At a computer devic ...

  10. [D3] Draw a basic US d3-geo map

    Install: npm install --save d3 d3-geo topojson Code: import React, {Component} from 'react'; import ...