javascript - Angular2中，组件传参问题

问题描述

问 题

目前我有三个组件，父组件下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

<ion-header>
  <ion-navbar>
    <ion-title>
      {{title}}
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="goods">
    <div class="menu-wrapper" *ngIf="Foods">
      <!--<a class="active" href="">蒸点类</a>-->
      <a *ngFor="let l of Foods;let i=index" (click)="getSid(i)">{{l.name}}</a>
    </div>
    <div class="list-wrapper">
      <div class="pic"><img src="../../assets/images/food_big.png"></div>
      <ul>
        <li *ngFor="let s of sel;let o = index">
          <span class="title">{{s.name}}({{s.numb}}件)</span>
          <div class="info">
            <span class="price">${{s.price}}</span>
            <span class="cart-change" *ngIf="s.numb>0">
                <count (countOut)="getCount($event)"></count>
            </span>
            <span class="cart-change" *ngIf="s.numb<=0">
                <img src="../../assets/images/none.jpg" alt="">
            </span>
          </div>
        </li>
      </ul>
    </div>
  <cart [count]="cartcount"></cart>
  </div>
</ion-content>

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

<a class="reduce" [hidden]="show" (click)="delCount()">-</a>
<a class="count" [hidden]="show">{{icount}}</a>
<a class="add" (click)="addCount()">+</a>

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

<div class="cart">
  <div class="cart-item"><img src="../../assets/images/cart.png"><span *ngIf="totalCount(count)>0">{{totalCount(count)}}</span></div>
  <div class="cart-order">查看订单</div>
  <div class="cart-pay">$220</div>
</div>

解决方案

本人自己已经解决了问题，下面贴出方法，让关注同一问题的朋友也能知道答案。在segmentfault上发了两次提问，都没有人回答。好无奈的！解决方法如下：
引入AfterViewInit、ViewChildren和QueryList

import {Component, AfterViewInit, QueryList, ViewChildren} from '@angular/core';
export class FoodInfo implements AfterViewInit{}
ngAfterViewInit(){}
//获得子组件的集合
@ViewChildren(Count) listCount: QueryList<Count>;

这篇关于javascript - Angular2中，组件传参问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！