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 相关文章推荐
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
js清空form表单中的内容示例
May 20 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
详解Vue底部导航栏组件
May 02 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 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 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
理解JavaScript中的事件
2006/09/23 Javascript
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python实现SOM算法
2018/02/23 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
致百米运动员广播稿
2014/01/29 职场文书
民间借贷借条如何写
2015/05/26 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
结婚典礼主持词
2015/06/29 职场文书
小学运动会宣传稿
2015/07/23 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
利用Redis实现点赞功能的示例代码
2022/06/28 Redis