Angular利用内容投射向组件输入ngForOf模板的方法


Posted in Javascript onMarch 05, 2018

现在,我们写一个组件puppiesListCmp,用于显示小狗狗的列表:

//puppies-list.component.ts
@Component({
 selector: 'puppies-list',
 template: `
  <div *ngFor="let puppy of puppies">
   <span>{{puppy.name}}</span>
   <span>{{puppy.age}}</span>
   <span>{{puppy.color}}</span>
  </div>
`
})
export class puppiesListCmp{
 @Input() puppies: Puppy[];
}
interface Puppy {
 name: string,
 age: number,
 color: string
}

然后这样使用:

//app.component.ts
@Component({
 selector: 'my-app',
 template: `
  <puppies-list [puppies]="puppies"></puppies-list>
`
})
export class App{
 puppies = [
  {
   name: "sam",
   age: 0.6,
   color: "yellow"
  },
  {
   name: "bingo",
   age: 1.5,
   color: "black"
  }
 ]
}

效果就行这样:

Angular利用内容投射向组件输入ngForOf模板的方法

但是,我希望我们的puppiesListCmp组件可以满足不同的需求,比如在数据不变的情况下只显示小狗狗的name和color,就像这样:

Angular利用内容投射向组件输入ngForOf模板的方法

这就是本文的重点了。我们需要实现用户自定义模板!

现在我们不写死组件的模板了,而是让用户从外部输入!

首先,我们的组件模板:

<div *ngFor="let puppy of puppies">
   <span>{{puppy.name}}</span>
   <span>{{puppy.age}}</span>
   <span>{{puppy.color}}</span>
</div>

等价于:

<ng-template ngFor let-puppy [ngForOf]="puppies">
   <div>
    <span>{{puppy.name}}</span>
    <span>{{puppy.age}}</span>
    <span>{{puppy.color}}</span>
   </div>
</ng-template>

然后,用@ContentChild(关于@ContentChild可以查看这里,需FQ)获取到外部(相对puppiesListCmp组件而言)自定义模板,并赋给ngForTemplate。也就是说,这部分:

<div>
  <span>{{puppy.name}}</span>
  <span>{{puppy.age}}</span>
  <span>{{puppy.color}}</span>
</div>

不再像之前那样写死在组件里了,而是由使用者在父组件中自定义,然后利用Angular的内容投射(Content Projection),投射到puppiesListCmp组件里面。就像这样:

//puppies-list.component.ts
import { Component, Input, ContentChild, TemplateRef } from '@angular/core';
import { NgForOfContext } from '@angular/common';
@Component({
 selector: 'puppies-list',
 template: `
<ng-template ngFor let-puppy [ngForOf]="puppies" [ngForTemplate]="tpl"></ng-template>
`
})
export class puppiesListCmp{
 @Input() puppies: Puppy[];
 @ContentChild(TemplateRef) tpl: TemplateRef<NgForOfContext<Puppy>>
}
interface Puppy {
 name: string,
 age: number,
 color: string
}

这样我们的组件就算完成了。然后我们使用它:

//app.component.ts
@Component({
 selector: 'my-app',
 template: `
<puppies-list [puppies]="puppies">
 <ng-template let-puppy>
  <div>
   <span>{{puppy.name}}</span>
   <span>{{puppy.age}}</span>
   <span>{{puppy.color}}</span>
  </div>
 </ng-template>
</puppies-list>
`
})

效果还是一样的:

Angular利用内容投射向组件输入ngForOf模板的方法

如果我们只要显示小狗狗的name和color,只要这样写就好了:

//app.component.ts
@Component({
 selector: 'my-app',
 template: `
<puppies-list [puppies]="puppies">
 <ng-template let-puppy>
  <div>
   <span>{{puppy.name}}</span>
   <span>{{puppy.color}}</span>
  </div>
 </ng-template>
</puppies-list>
`
})

效果就像这样:

Angular利用内容投射向组件输入ngForOf模板的方法

这样的组件很灵活,想要什么样的效果都可以定制,这就实现了组件的复用。

好了,本文就到此为止了。不当之处,欢迎指出!希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
JS处理VBArray的函数使用说明
May 11 Javascript
关于js遍历表格的实例
Jul 10 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
js实现五星评价功能
Mar 08 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 #Javascript
axios拦截设置和错误处理方法
Mar 05 #Javascript
完美解决axios在ie下的兼容性问题
Mar 05 #Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 #Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 #Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 #Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 #Javascript
You might like
我常用的几个类
2006/10/09 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
关工委先进个人事迹材料
2014/05/23 职场文书
cf战队收人口号
2014/06/21 职场文书
军事博物馆观后感
2015/06/05 职场文书
干部考核工作总结
2015/08/12 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书