angular6.x中ngTemplateOutlet指令的使用示例


Posted in Javascript onAugust 09, 2018

在使用angular进行开发的时候,通过属性绑定向组件内部传值的方式,有时候并不能完全满足需求,比如我们写了一个公共组件,但是某个模板使用这个公共组件的时候,需要在其内部添加一些标签内容,这种情况下,除了使用ngIf/ngSwitch预先在组件内部定义之外,就可以利用ngTemplateOutlet指令向组件传入内容.

ngTemplateOutlet指令类似于angularjs中的ng-transclude,vuejs中的slot.

ngTemplateOutlet是结构型指令,需要绑定一个TemplateRef类型的实例.

使用方式如下:

@Component({
 selector: 'app',
 template: `
  <h1>Angular's template outlet and lifecycle example</h1>
  <app-content [templateRef]="nestedComponentRef"></app-content>
  <ng-template #nestedComponentRef let-name>
   <span>Hello {{name}}!</span>
   <app-nested-component></app-nested-component>
  </ng-template>
 `,
})
export class App {}
@Component({
 selector: 'app-content',
 template: `
  <button (click)="display = !display">Toggle content</button>
  <template 
    *ngIf="display" 
    *ngTemplateOutlet="templateRef context: myContext">
  </template>
 `,
})
export class Content {
 display = false;
 @Input() templateRef: TemplateRef;
 myContext = {$implicit: 'World', localSk: 'Svet'};
}
@Component({
 selector: 'app-nested-component',
 template: `
  <b>Hello World!</b>
 `,
})
export class NestedComponent implements OnDestroy, OnInit {
 
 ngOnInit() {
  alert('app-nested-component initialized!');
 }
 
 ngOnDestroy() {
  alert('app-nested-component destroyed!');
 }
 
}

代码中除了跟组件外定义了两个组件

  1. 容器组件:app-content
  2. 传递进去的内容组件:app-nested-component

app-content组件接收一个TemplateRef类型的输入属性templateRef,并在模板中将其绑定到了ngTemplateOutlet指令,当组件接收到templateRef属性时,就会将其渲染到ngTemplateOutlet指令所在的位置.

上例中,app-content组件templateRef属性的来源,是在根组件的模板内,直接通过#符号获取到了app-nested-component组件所在<ng-template>的引用并传入的.

在实际应用中,除了这种方式,也可以直接在组件内部获取TemplateRef类型的属性并绑定到ngTemplateOutlet指令.

比如在容器组件为模态框的情况下,并不能通过模板传值,就可以使用下面这种方式:

@ViewChild('temp') temp: TemplateRef<any>

 openDialog(){
  this.dialog.open(ViewDialogComponent, {data: this.temp)
 }

在容器组件中还可以定义被传递内容的上下文(上例app-content组件中的myContext属性),其中的$implicit属性作为默认值,在被传递的内容中可以以重命名的方式访问(上例let-name),对于上下文中其他的属性,就需要通过let-属性名的方式访问了.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 异步处理进度条
Apr 01 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
原生js实现吸顶效果
Mar 13 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
js实现自定义右键菜单
May 18 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
关于JavaScript回调函数的深入理解
Jun 27 Javascript
koa上传excel文件并解析的实现方法
Aug 09 #Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 #Javascript
vue-cli初始化项目中使用less的方法
Aug 09 #Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 #Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 #Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 #Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 #Javascript
You might like
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
js 数据类型转换总结笔记
2011/01/17 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
如何运行Python程序的方法
2013/04/21 Python
python中redis的安装和使用
2016/12/04 Python
django 创建过滤器的实例详解
2017/08/14 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python设置环境变量的作用和实例
2019/07/09 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
华为python面试题
2016/05/03 面试题
工商管理本科生求职信
2014/07/13 职场文书
工伤事故证明
2014/10/20 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2015年英语教师工作总结
2015/05/20 职场文书