Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

Angular2如何获得多个相同子组件传递的集合

Posted on 2017年4月16日2017年4月16日 by king2088

比如我有一个父组件,而在父组件中有多个相同的组件,比如父组件使用了ngFor循环,而在ngFor下面有一个子组件,这样当循环出来后就有很多个子组件了。那么我们要如何才能获得这几个子组件中的相应数据集合呢?之前我到segmentfault进行了提问,但是并没有人为我回答,终于在对官方文档阅读以及google了很多后,终于找到答案了。下面就让我们去解开angular2的面纱吧。
在angular中,我们需要从相同子组件中获取相关字段,我们可以直接使用@ViewChildren,如果你E文较好,那么我们把这个单词拆开来理解@ViewChildren,View Children,view是视图或者显示,children则是孩子或者子类,简单的说就是获取子组件的相关集合。
我使用它做了一个简单的demo,地址是:http://www.egtch.com/demo/angular/
在实例中显示如下图:

angular
angular

首先我们直接点击“点此获得点“赞”的数据集合”即可显示相关数据。
另外我们可以通过点击每一个电影下面的+号来查看所获得的数据。
相关源码:
子组件ViewChildrenCom.ts
import { Component, Input } from '@angular/core';

@Component({
selector: 'vc',
templateUrl: './ViewChildrenCom.html',
styleUrls: ['./ViewChildrenCom.css']
})
export class iViewChildren {
count=0;
constructor(){}
addCount(){
this.count++
}
}

ViewChildrenCom.html
赞 {{count}} 次+
ViewChildrenCom.css
.l {
float: left;
font-size: 12px;
background: #ccc;
color: #fff;
padding: 2px;
}
.r {
float: right;
width: 50px;
font-size: 12px;
background: #4169e1;
color: #fff;
padding: 2px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.i {
float: right;
font-size: 12px;
background: #a52a2a;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
color: #fff;
padding: 2px 6px;
}

下面我们来看父组件的相关代码
ViewChildren.ts
import { Component, QueryList, ViewChildren } from '@angular/core';
import {Http} from '@angular/http';
import {iViewChildren} from '../ViewChildrenCom/ViewChildrenCom';

@Component({
selector: 'ViewChildren',
templateUrl: './ViewChildren.html',
styleUrls: ['./ViewChildren.css']
})
export class MyViewChildren {
title = '@ViewChildren获取子组件传递的数据集合';
url = 'assets/data.json';
data = '';
count:any;
constructor(public http:Http){
http.get(this.url).subscribe(res=> this.data = res.json());
}
//获得count组件的数字集合
@ViewChildren(iViewChildren) listCount: QueryList;
getCount(){
this.count = this.listCount.toArray();
console.log(this.count);
// alert('目前获得的内容:'+this.count+' 可以直接查看浏览器调试中获得的这几条数据');
return this.count
}
}

ViewChildren.html

{{title}}

{{c.count}} ,


  • {{m.name}}

    {{m.start}}分


ViewChildren.css
.clearfix {
content: '';
height: 0;
display: block;
clear: both;
overflow: hidden;
}
.myTest {
width: 80%;
margin: 0 auto;
}
.myTest .inner {
width: 100%;
padding-top: 10px;
}
.myTest .inner .bt {
background: #00008b;
color: #fff;
border: none;
border-radius: 5px;
padding: 3px 6px;
}
.myTest .inner .ct {
color: #a52a2a;
font-size: 12px;
padding: 10px;
}
.myTest .movie-list {
width: 120px;
height: auto;
margin: 10px;
padding: 5px;
display: inline-block;
background: #eee;
border-radius: 5px;
}
.myTest .movie-list:hover {
box-shadow: 0 1px 10px #333;
}
.myTest .movie-list .image {
width: 100%;
}
.myTest .movie-list .image>img {
width: 120px;
height: 160px;
}
.myTest .movie-list .name,
.myTest .movie-list .start {
display: block;
width: 100%;
font-size: 16px;
text-align: center;
padding: 2px 0;
}
.myTest .movie-list .name {
border-bottom: 1px #ddd solid;
}
.myTest .movie-list .start .l {
float: left;
font-size: 12px;
background: #ccc;
color: #fff;
padding: 2px;
}

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 3月
一 二 三 四 五 六 日
 12345
6789101112
13141516171819
20212223242526
2728293031  
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme