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 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
如何快速上手Vuex
Feb 14 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 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 cookies中删除的一般赋值方法
2011/05/07 PHP
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
浅析Ajax语法
2016/12/05 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
python备份文件的脚本
2008/08/11 Python
Python合并字符串的3种方法
2015/05/21 Python
Python分治法定义与应用实例详解
2017/07/28 Python
python使用epoll实现服务端的方法
2018/10/16 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
办公室文秘自我评价
2013/09/21 职场文书
历史学专业毕业生求职信
2013/09/27 职场文书
科室工作个人总结的自我评价
2013/10/29 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
出差报告范文
2014/11/06 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
离婚起诉书范本
2015/05/18 职场文书
刑事案件上诉状
2015/05/23 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书