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
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
taro开发微信小程序的实践
May 21 Javascript
详解微信小程序动画Animation执行过程
Sep 23 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
长波知识介绍
2021/03/01 无线电
3.从实例开始
2006/10/09 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
php防止用户重复提交表单
2015/11/02 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
python实现数通设备端口监控示例
2014/04/02 Python
获取Django项目的全部url方法详解
2017/10/26 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
升职自荐信范文
2013/10/05 职场文书
运动会广播稿300字
2014/01/10 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python
Android自定义双向滑动控件
2022/04/19 Java/Android