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 相关文章推荐
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
tsconfig.json配置详解
May 17 Javascript
基于javascript实现放大镜特效
Dec 03 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如何编写易读的代码
2007/07/10 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
js 方法实现返回多个数据的代码
2009/04/30 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
小程序实现密码输入框
2020/11/16 Javascript
python从sqlite读取并显示数据的方法
2015/05/08 Python
wxPython中listbox用法实例详解
2015/06/01 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
python内置模块collections知识点总结
2019/12/19 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
搬家公司的创业计划书
2014/01/01 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
挂职个人工作总结
2015/03/05 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
创业计划书之甜品店
2019/09/18 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android