Angular 向组件传递模板的两种方法


Posted in Javascript onFebruary 23, 2018

最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式。为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的。这时候,组件的一部分模板就需要由调用方提供。

在 React 里面,这种需求挺简单的,只要实现一个 date => Element 这样的函数就好了,但是 Angular 模板是纯粹的模板,需要使用一些专门的概念才能实现这个功能。

第一种方式 <ng-content>

<ng-content> 这个标签到本文撰写时为止,还没有官方的文档,甚至连占位符都没有。但是这并不妨碍我们的使用,外国热心网友已经总结出了 <ng-content> 在现阶段的特点与作用。

基本用法

<!-- Wrapper.Component.html -->
<div>
  hello
  <ng-content></ng-content>
</div>

假设我们有一个上述的组件,然后向下面这样调用:

<wrapper>
  <span> World </span>
</wrapper>

那么最终的渲染结果将会是这样的:

<div>
  hello
  <span> World </span>
</div>

看起来就是发生了很简单的替换,但是如果在 Wrapper 中出现了多个 <ng-content> 会出现多个 <span> World </span> 吗?答案是不会的。<ng-content> 的本质只是移动元素,并不会去自动的创建传入的模板,所以就算用 ngFor 套住 <ng-content> 也不会出现很多个 <span> World </span>。如果传入的是自定义的组件,这些组件也只会被实例化一次。

进阶用法

当然,如果 <ng-content> 的功能仅仅只是这样就显得太鸡肋了,在使用 <ng-content> 的时候可以指定一个选择器,这个选择器可以捕获相符的直接子元素。例如:

<!-- Wrapper.Component.html -->
<div>
  hello
  <ng-content></ng-content>
  <hr/>
  <ng-content select="span"></ng-content>
</div>

然后像下面这样使用:

<wrapper>
  <span> World </span>
  2333
</wrapper>

最终的渲染结果将会是这样:

<div>
  hello
  2333
  <hr/>
  <span> World </span>
</div>

除了设置 ng-content 标签的 select 属性之外,还可以在子元素上使用 ngProjectAs 属性,这个属性可以让这个元素被父元素中指定的 ng-content 所捕获。举个例子:

<wrapper>
  <div ngProjectAs="span"> World </div>
  2333
</wrapper>

这次被传入的模板变成了一个 div,但是因为设置了 ngProjectAs,所以“World”会出现在分割线下方。

第二种方式 NgTemplateOutlet 指令

使用 ng-content 确实可以起到传入模板的效果,但是却有个很致命的问题,就是无法传递数据到传入的模板中。为了将数据传递到传入的模板中,就需要使用到 NgTemplateOutlet 指令。

基本使用

这个指令可以用来在模板的指定位置实例化一个 TemplateRef 对象,同时,在实例化的过程中还可以传入一个数据对象。而 TemplateRef 可以通过 ng-template 标签来创建,举个例子:

@Component({
 selector: 'ng-template-outlet-example',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>

  <ng-template #name let-name="data"><span>Hello {{name}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
 myContext = {data: 'World'};
}

ng-container 是一个虚拟的元素,在这个元素上我们使用了一个 NgTemplateOutlet 指令,指定了要实例化下面的名为 name 的 ng-template。同时把 myContext 这个对象作为实例化的数据上下文传入,所以最终就会显示 “Hello World!”。值得注意的是在 ng-template 里面获取传输的数据上下文的方式:let-variableName='key'

进阶使用

接下来就要实现本文开头提到的需求了,在组件外部传入模板。还是以上面的例子为例,因为模板需要由外界作为子内容传入,所以需要我们手动来捕获模板,这里需要就需要使用 ContentChild:

@Component({
 selector: 'wrapper',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>
`
})
class NgTemplateOutletExample {
 @ContentChild(TemplateRef) name: TemplateRef<any>;
 myContext = {data: 'World'};
}

就是这么简单的改动就可以让我们的组件从外界接受模板了,来试一试:

<wrapper>
  <ng-template let-value="data">
    <span>Hello {{value}}!</span>
  </ng-template>
</wrapper>

总结

以上就是 Angular 中向组件传递模板的两种方法,其中,使用 <ng-content> 标签可以更方便的控制传入的模板在 DOM 中的位置,而 NgTemplateOutlet 可以向传入的模板传递渲染数据,两者搭配使用可以起到很好的效果。

以上所述是小编给大家介绍的Angular 向组件传递模板的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
详解Node.js中的Async和Await函数
Feb 22 #Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 #Javascript
webpack-dev-server远程访问配置方法
Feb 22 #Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 #Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 #Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 #Javascript
webpack-dev-server自动更新页面方法
Feb 22 #Javascript
You might like
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php生成excel列序号代码实例
2013/12/24 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
asm.js使用示例代码
2013/11/28 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Python与R语言的简要对比
2017/11/14 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
python跨文件使用全局变量的实现
2020/11/17 Python
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
专业求职信撰写要诀
2014/02/18 职场文书
职称评定自我鉴定
2014/03/18 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
活动主持人开场白
2015/05/28 职场文书