Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法


Posted in Javascript onAugust 08, 2018

ng-template 是用来定义模板的,当使用ng-template定义好一个模板之后,可以用ng-container和templateOutlet指令来进行使用。

<ng-template #loading>
 <button (click)="login()">login</button>
 <button (click)="sigup()">sigup</button>
</ng-template>
<ng-container *ngTemplateOutlet="loading">
</ng-container>

ng-template在编写高定制性的组件时非常有用。可以把需要定制的内容作为模板传到组件中。

下面看下angular 使用 ngTemplateOutlet 指令

ngTemplateOutlet 的作用

该指令用于基于已有的 TemplateRef 对象,插入对应的内嵌视图。在应用 NgTemplateOutlet 指令时,我们可以通过 [ngTemplateOutletContext] 属性来设置 EmbeddedViewRef 的上下文对象。绑定的上下文应该是一个对象,此外可通过 let语法来声明绑定上下文对象属性名。

 ngTemplateOutlet 的使用

import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 template: `
  <ng-template #stpl>
   Hello, Semlinker!
  </ng-template>
  <ng-template #atpl>
   Hello, Angular!
  </ng-template>
  <div [ngTemplateOutlet]="atpl"></div>
  <div [ngTemplateOutlet]="stpl"></div>
 `,
})
export class AppComponent { }

 ngOutletContext 的使用

import { Component } from '@angular/core'; 
@Component({
 selector: 'app-root',
 template: `
  <ng-template #stpl let-message="message">
   <p>{{message}}</p>
  </ng-template>
  <ng-template #atpl let-msg="message">
   <p>{{msg}}</p>
  </ng-template>
  <ng-template #otpl let-msg>
   <p>{{msg}}</p>
  </ng-template>
  <div [ngTemplateOutlet]="atpl"
   [ngOutletContext]="context">
  </div>
  <div [ngTemplateOutlet]="stpl"
   [ngOutletContext]="context">
  </div>
  <div [ngTemplateOutlet]="otpl"
   [ngOutletContext]="context"> </div>
 `,
}) 
export class AppComponent {
 context = { message: 'Hello ngOutletContext!', 
  $implicit: 'Hello, Semlinker!' };
}

总结

以上所述是小编给大家介绍的Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 Javascript
深入理解Promise.all
Aug 08 #Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 #Javascript
vue devtools的安装与使用教程
Aug 08 #Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 #jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 #jQuery
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 #Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 #jQuery
You might like
php获取操作系统语言代码
2013/11/04 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
javascript 实用的文字链提示框效果
2010/06/30 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
python 查找字符串是否存在实例详解
2017/01/20 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
详解Python 中的容器 collections
2020/08/17 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
厨师长岗位职责
2014/03/02 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书