目前我有三个组件,父组件下ngFor中有一个子组件,因此循环出来的就有好几个子组件,而每个子组件的内容可能都不一样。那么我要如何将此子组件中所有的内容获取?,如下图,请使用angular2
我想要的效果就如上图所示,现在我已经实现了红色框内的组件了,而且也实现了红色框中点击增加数字的效果。
但是购物车中,我却无法实现总量的计算。请大牛指点下吧!相关代码如下:
foodinfo.ts
import {Component, Injectable, OnInit, ElementRef} from '@angular/core'; import { NavController,NavParams } from 'ionic-angular'; import 'rxjs/Rx'; import { Http } from '@angular/http'; import {food} from '../../app/food'; import {Count} from '../count/count'; import {Cart} from '../cart/cart'; @Component({ selector: 'page-foodinfo', templateUrl: 'foodinfo.html', providers:[Count,Cart] }) @Injectable() export class FoodInfo implements OnInit{ public title =''; public Foods :food[]; public apiUrl='http://www.egtch.com/demo/bindo/data.php'; public id=0; public sid = 0; public sel =[]; public show= true; public cartcount = []; public iscount:number; public price:number; public itemPrice:number; constructor(public navCtrl: NavController,navParams:NavParams, public http: Http,el:ElementRef) { this.id = navParams.get('isId') - 1; this.title = navParams.get('title'); http.get(this.apiUrl).subscribe(res=> this.Foods = res.json()[this.id].cat); http.get(this.apiUrl).subscribe(res=> this.sel = res.json()[this.id].cat[this.sid].setmeal); var ele = el.nativeElement.querySelector('.count'); console.log(ele); } /*@ViewChild(Count) count:Count;*/ /*ngAfterViewInit() { // do something with list items console.log(this.count); }*/ ngOnInit(){} getSid(sid){ this.sid=sid; console.log(sid); this.http.get(this.apiUrl).subscribe(res=> this.sel = res.json()[this.id].cat[this.sid].setmeal); } getCount(event){ this.cartcount = event; //for(let i=0;){} //console.log(this.cartcount); } }
foodinfo.html
{{title}}
- {{s.name}}({{s.numb}}件)
${{s.price}} 0">
count.ts(这个就是红色框的组件)
import { Component, Output, EventEmitter } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'count', templateUrl: 'count.html' }) export class Count { public show= true; public icount=0; constructor(public navCtrl: NavController) {}; addCount(){ this.icount++; this.show = false; console.log(this.icount); this.countOut.emit(this.icount); } delCount(){ if(this.icount>0){ this.icount--; this.show = false; } if(this.icount<1){ this.icount = 0; this.show = true; } this.countOut.emit(this.icount); } @Output() countOut = new EventEmitter(); }
count.html
- {{icount}} +
cart.ts(购物车组件)
import { Component,Input } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'cart', templateUrl: 'cart.html' }) export class Cart { constructor(public navCtrl: NavController) {}; @Input() count: number; @Input() selectFood; totalCount(v) { let count = 0; count = v; //console.log(this.count) return count; } }
cart.html
0">{{totalCount(count)}}
查看订单
$220
本人自己已经解决了问题,下面贴出方法,让关注同一问题的朋友也能知道答案。在segmentfault上发了两次提问,都没有人回答。好无奈的!解决方法如下:
引入AfterViewInit、ViewChildren和QueryList
import {Component, AfterViewInit, QueryList, ViewChildren} from '@angular/core'; export class FoodInfo implements AfterViewInit{} ngAfterViewInit(){} //获得子组件的集合 @ViewChildren(Count) listCount: QueryList<Count>;