[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 ...
随机推荐
- POJ 1474 Video Surveillance 半平面交/多边形核是否存在
http://poj.org/problem?id=1474 解法同POJ 1279 A一送一 缺点是还是O(n^2) ...nlogn的过几天补上... /********************* ...
- 【Henu ACM Round #12 D】 Longest Subsequence
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 记录每个数字出现的次数cnt[x]; (大于1e6的直接忽略) 另外用一个数组z[1e6] 然后for枚举x 第二层for枚举x的倍 ...
- golang 数组
数组是Go语言编程中最常用的数据结构之一.顾名思义,数组就是指一系列同一类型数据的集合.数组中包含的每个数据被称为数组元素(element),一个数组包含的元素个数被称为数组的长度. 在Go语言中数组 ...
- Vue 学习记录<2>
一.Vue https://vue-loader.vuejs.org/zh-cn/ https://vuejs-templates.github.io/webpack/structure.html
- WINDOWS8.1企业版官方下载
这是评估版 WINDOWS8.1企业版官方下载源 https://www.itechtics.com/download-windows-8-1-enterprise-offline-installer ...
- the way to go
推荐两本书 关于go语言的 The way to go Go语言编程高清完整版电子书.pdf
- 解决eclipse端口被占用的问题
问题如图所示,在eclipse中开启tomcat服务器时报错:端口已被占用. 这是因为在tomcat开启的状态下,eclipse异常关闭,导致tomcat一直占用端口. 解决办法如下: 1: 输入命令 ...
- 【Good Bye 2017 C】 New Year and Curling
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举前i-1个圆. 哪些圆和它相交. 取圆心纵坐标最大的那个圆就可以了. [代码] #include <bits/stdc++ ...
- windows服务插件利器-新生命组件XAgent使用心得
1.简单介绍 XAgent为大石头带领下的新生命团队自己开发的一个.Net下的常用的Windows服务管理组件利器,通过在控制台中简单的输入1,2,3,4,5等数字可以实现一步安装.卸载Windows ...
- l洛谷 P3926 SAC E#1 - 一道不可做题 Jelly
P3926 SAC E#1 - 一道不可做题 Jelly 题目背景 SOL君(炉石主播)和SOL菌(完美信息教室讲师)是好朋友. 题目描述 SOL君很喜欢吃蒟蒻果冻.而SOL菌也很喜欢蒟蒻果冻. 有一 ...