[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 ...
随机推荐
- MyBatis学习总结(16)——Mybatis使用的几个建议
1.Mapper层参数为Map,由Service层负责重载. Mapper由于机制的问题,不能重载,参数一般设置成Map,但这样会使参数变得模糊,如果想要使代码变得清晰,可以通过service层来实现 ...
- 安卓手机上安装 谷歌 play 商店
安卓手机上安装 谷歌 play 商店 安卓(Android)就是现在流行的智能手机系统,它是由Google公司和开放手机联盟领导及开发.由于安卓系统的底层代码(AOSP)是开源的,以GPL和Apach ...
- checkbox-padding 调整checkbox字体跟图标距离
有时候我们会遇到需要调整控件中的内容相对于容器的位置.这里有两种情况 1.linearlayout这样的容器中,包含button类的控件,这时候margin可以调节 2.textview中的文字内容 ...
- 自定义控件学习——下拉刷新ListView
效果 开始用Android Studio写了,还有挺多不明白这IDE用法的地方....蛋疼 主要思路 1. 添加了自定义的头布局 2. 默认让头布局隐藏setPadding.设置 -自身的高度 ...
- Flume的client
Client:生产数据,运行在一个独立的线程.
- 3.1 Broker Configs 官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 3.1 Broker Configs 3.1 broker配置 The essent ...
- ubuntu14.04.32 vmware11开发环境搭建
win7 64 vmware11 ubuntu14.04.32 在vmaware上安装ubuntu,自定义安装,选择区域为上海,这样数据源就会自动设置为中国,获取网络数据会较快,也可以安装完之后改变 ...
- 如何在实际项目中使用Promise(入门级)
你们有没有遇到过这样的情况,ES6看过了,Promise的文字概念都懂,但是我要怎么在项目中去写一个Promise呢? 那天我就是带着这样的疑问去网上搜了下.最后成功地在项目中应用了Promise,只 ...
- Robot Framework 自动化测试
Robot Framework 自动化测试 RIDE 是 Robot Framework 测试数据的编辑器.它使测试用例的创建.运行.测试项目的组织可以在图形界面下完成. 通过 RIDE 去学习和使用 ...
- 看<Asp.net夜话>随笔(2013-10-13)
1.Asp.net内置对象 1.1Request对象 封装了客户端请求信息 1.2Response对象 代表了服务器响应对象,可以向客户端返回数据 1.3Server对象 是用于获取服务器的相关信息的 ...