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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 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数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
js简单实现删除记录时的提示效果
2013/12/05 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
vue实现简易的双向数据绑定
2020/12/29 Vue.js
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python 用下标截取字符串的实例
2018/12/25 Python
基于python的Paxos算法实现
2019/07/03 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
保送生自荐信范文
2013/10/06 职场文书
七年级音乐教学反思
2014/01/26 职场文书
探亲假请假条
2014/04/11 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
500字作文之周记
2019/12/13 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
python 算法题——快乐数的多种解法
2021/05/27 Python
全网非常详细的pytest配置文件
2022/07/15 Python