[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 ...
随机推荐
- 小米开源文件管理器MiCodeFileExplorer-源码研究(2)-2个单实例工具类
从本篇开始,讲解net.micode.fileexplorer.util工具包中的类.这个包下的类,功能也比较单一和独立.很多代码的思想和实现,可以用于JavaWeb和Android等多种环境中. 一 ...
- 【Codeforces Round #428 (Div. 2) A】Arya and Bran
[Link]: [Description] [Solution] 傻逼题 [NumberOf WA] [Reviw] [Code] #include <bits/stdc++.h> usi ...
- crmjs区分窗口是否是高速编辑
有时候,我们须要区分打开的窗口是否是高速编辑页面,在上面做一些逻辑处理: 窗口上面附加的js代码: function loadFrom() { var formType = Xrm.Page. ...
- 《Java设计模式》之桥接模式
Bridge模式的概念 Bridge 模式是构造型的设计模式之中的一个.Bridge模式基于类的最小设计原则,通过使用封装,聚合以及继承等行为来让不同的类承担不同的责任.它的主要特点是把抽象(abst ...
- 保留的 IPv4 地址
保留的IP地址 https://en.wikipedia.org/wiki/Reserved_IP_addresses 地址块(CIDR) 范围 地址数量 范围 目的 0.0.0.0/8 0.0. ...
- makeMtk- user 版本编译
有时候我们需要在我们的手机上编译user 版本,先说一下user 跟eng版本的区别 user:这个版本是没有root权限的,当你adb shell进入后,linux下显示的是$,不可以push ap ...
- Android学习笔记进阶21之设置壁纸
别忘记在ApplicationManifest.xml 中加上权限的设置. <uses-permission Android:name = "android.permission.SE ...
- jodd-cache集锦
Jodd cache提供了一组cache的实现,其层次如下: 其中, AbstractCacheMap是一个具有计时和大小的缓存map的默认实现,它的实现类必须: 创建一个新的缓存map. 实现自己的 ...
- 《三》Java IO 字节输入输出流
那么这篇博客我们讲的是字节输入输出流:InputStream.OutputSteam(下图红色长方形框内),红色椭圆框内是其典型实现(FileInputSteam.FileOutStream) ...
- MFC窗口显隐
使用SetLayeredWindowAttributes可以方便的制作透明窗体,此函数在w2k以上才支持,而且如果希望直接使用的话,可能需要下载最新的SDK.不过此函数在w2k的user32.dll里 ...