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 相关文章推荐
直接生成打开窗口代码,不必下载
May 14 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
svg动画之动态描边效果
Feb 22 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
JS控制下拉列表左右选择实例代码
May 08 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
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
详解vue 组件
2020/06/11 Javascript
python杀死一个线程的方法
2015/09/06 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
Django 路由系统URLconf的使用
2018/10/11 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
python同步windows和linux文件
2019/08/29 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
护理自荐信范文
2013/10/05 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
农业项目建议书
2014/08/25 职场文书
作风建设年活动总结
2014/08/27 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书