[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 ...
随机推荐
- Linux基础(vim)
1.源文件到可执行文件经历了什么? gcc -E main.c -o(输出) main.i 第一阶段:预处理:加载了include文件 gcc -S main.i -o main.s 第二阶段:编译( ...
- Laravel输出sql语句
$queries = DB::getQueryLog();
- python try except 捕捉错误得到错误的时候的值
try: dict_reason = self.get(name,id_number,mobile,card_number,**kwargs) except RetryError as e: # 获取 ...
- 使用Cygwin在Windows上体验Linux的快感
前言 记得大学的时候就以前使用过Cygwin,可惜当时没有发现她的美,我相信如今大多数朋友可能会更加倾向于使用Git或者干脆直接使用虚拟机以及原生Unix. 只是对于刚进入Linux的世界新人来说,使 ...
- 使用注解的方式配置Servlet
提到Servlet的配置,大多数人想到的应该都是在web.xml中配置吧.有没有更简洁的方式呢?今天就学到了採用注解的方式配置Servlet. 此方式尽管简便.但当然也存在问题. 採用注解的有点:你能 ...
- Maven搭建hadoop环境报Missing artifact jdk.tools:jdk.tools:jar:1.7
今天,更新了工程,报错了. 项目中用了HBase,也有Hadoop相关的jar配置. pom文件, Missing artifact jdk.tools:jdk.tools:jar:1.7 Maven ...
- STM32之CAN通讯接收过滤器过滤分析
一.前言 学习了CAN通讯,底层的东东CAN控制器已经帮你处理完成,也就是CAN通讯协议已经做好,你按协议格式往对应的位扔数据发送就好,所以使用CAN通讯,我们只需要去关心制定发送的数据间的协议,也就 ...
- 设计模式六大原则(四):接口隔离原则(Interface Segregation Principle)
接口隔离原则(ISP)定义: 客户端不应该依赖它不需要的接口:一个类对另一个类的依赖应该建立在最小的接口上. 问题由来: 类A通过接口I依赖类B,类C通过接口I依赖类D,如果接口I对于类A和类B来说不 ...
- 第6章4节《MonkeyRunner源代码剖析》Monkey原理分析-事件源-事件源概览-翻译命令字串
在第2节中我们看到了MonkeySourceNetwork是怎样从Socket中获取MonkeyRunner发送过来的命令字串的,可是最后怎样将它翻译成事件的代码我们还没有进行分析,由于在那之前我们还 ...
- 上拉刷新,下拉加载(JQuery)
<script type="text/javascript"> $(document).ready(function() { $(w ...