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 相关文章推荐
jQuery.extend 函数详解
Feb 03 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
浅谈TypeScript 索引签名的理解
Oct 16 Javascript
详解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
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
微信小程序时间戳转日期的详解
2019/04/30 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
python控制台英汉汉英电子词典
2020/04/23 Python
python实现中文分词FMM算法实例
2015/07/10 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
计算机专业优秀大学生自我总结
2014/01/21 职场文书
妇产医师自荐信
2014/01/29 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
新学期开学演讲稿
2014/05/24 职场文书
班级课外活动总结
2014/07/09 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
保姆聘用合同
2015/09/21 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS