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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
vue使用openlayers实现移动点动画
Sep 24 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
php实现图片局部打马赛克的方法
2015/02/11 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
IE与firefox之jquery用法区别
2008/10/03 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
python3.4实现邮件发送功能
2018/05/28 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
外科实习自我鉴定
2013/10/06 职场文书
应届毕业生自我评价分享
2013/12/15 职场文书
护理个人求职信范文
2014/01/08 职场文书
小加工厂管理制度
2014/01/21 职场文书
高二地理教学反思
2014/01/24 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫