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写的一个DIV 弹出网页对话框
Aug 14 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
微信小程序实现禁止分享代码实例
Oct 19 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 第三节 变量介绍
2012/04/28 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
详解Python发送邮件实例
2016/01/10 Python
window下eclipse安装python插件教程
2017/04/24 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python文件读写代码实例
2019/10/21 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
化工专业推荐信范文
2013/11/28 职场文书
校园门卫岗位职责
2013/12/09 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers