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 最佳实践
Oct 30 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
javascript RegExp 使用说明
May 21 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
js变量提升深入理解
Sep 16 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
小程序实现筛子抽奖
May 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 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
django创建简单的页面响应实例教程
2019/09/06 Python
Django更新models数据库结构步骤
2020/04/01 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Python常用外部指令执行代码实例
2020/11/05 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
cf搞笑广告词
2014/03/14 职场文书
参观邀请函范文
2015/02/02 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
python基础之爬虫入门
2021/05/10 Python
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
HTML基本元素标签介绍
2022/02/28 HTML / CSS