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 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
XENON基于JSON变种
Jul 27 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
将查询条件的input、select清空
Jan 14 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php日历制作代码分享
2014/01/20 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
社团活动策划书范文
2014/01/09 职场文书
感恩的演讲稿
2014/05/06 职场文书
学生吸烟检讨书
2014/09/14 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
小学总务工作总结
2015/08/13 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS