[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"]
    };
  }

时间: 2024-11-06 05:42:26

[Angular2] Build reuseable template with ngTemplateOutlet的相关文章

angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用

今天我们要讲的是ng2的路由系统. 例子 例子是官网的例子,包含一个“危机中心”和“英雄列表”,都在一个app中,通过路由来控制切换视图.还包含了promise的用法,服务的用法等多个知识点. 源代码: https://github.com/lewis617/angular2-tutorial/tree/gh-pages/router 运行方法: 在根目录下运行: http-server 引入库文件设置base href 路由并不在ng2中,需要我们额外引入,另外我们需要设置base href,

vue安装与配置

直接引入 <script src="https://unpkg.com/vue"></script> 用npm安装   $ npm install vue Vue.js 提供一个官方命令行工具,vue-cli可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my

Excel import

Case Study: Reading cell content from excel template for COM variant type VT_R4 or VT_R8 is always little tricky.Observation: Reading real value can be done in following ways 1) num2Str0(_variant.double(), 0); 2) num2str(_variant.double(), 0, numOfDe

分享15款很实用的 Sass 和 Compass 工具

Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任何时候都更容易. 在这篇文章中,我们已经收集了一组有用的 Sass 和 Compass 工具,将帮助您快速构建 Web 应用程序. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScri

Mysql++学习(四)------模板查询

MySQL++提供的另外一个强大的功能就是模板查询,它提供像c语言中printf类似的机制:你提供给MySQL++一个包含固定串和变量占位符的查询字符串,之后可以替换这些占位符的变量. 下面例子显示了如何使用这一特性 1 #include <iostream> 2 #include <mysql++.h> 3 #include <errno.h> 4 #include <stdlib.h> 5 #include <stdio.h> 6 7 usi

C#之发送邮件【模板】+【封装】ZJ版

PS: 为了弥补上篇博客的不足,正好周六闲着没事.所有进行优化下,来个终结版 功能实现:模板发送+自指定邮箱发送+解耦 总体预览如下: 各代码如下:(代码略多,所以都折叠了) 前台; @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>In

bootstrap——free bootstrap admin dashboard templates

Gentellela Gentelella a responsive, flat and full featured admin template build. This template is build on Bootstrap 3 framework using modern techniques like HTML5 and CSS3 to be used for backend solutions of any size. This is by far the most advance

PostgreSQL with PostGIS for mapping coordinates

For location based service, I try to use postgresql with postgis. You can download postgis from here. http://postgis.net/source It is recommended that you need to download and compile yourself since there are many packages dependencies need to be don

golang代码执行顺序

一:首先man.go,整个程序的入口 func main() { beego.Run() } 然后beego.run()代码 // Run beego application. // beego.Run() default run on HttpPort // beego.Run(":8089") // beego.Run("127.0.0.1:8089") func Run(params ...string) { if len(params) > 0 &am