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 相关文章推荐
jquery动态添加option示例
Dec 30 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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如何编写易读的代码
2007/07/10 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
应届生简历中的自我评价
2014/01/13 职场文书
保护环境建议书
2014/03/12 职场文书
法律六进活动方案
2014/03/13 职场文书
合作意向书范本
2014/03/31 职场文书
团支部建设方案
2014/05/02 职场文书
银行求职自荐信
2014/06/30 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
PHP正则表达式之RCEService回溯
2022/04/11 PHP