javascript - Angular2中,组件传参问题

 NHHermit 发布于 2022-10-28 10:34

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

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

{{totalCount(count)}}

查看订单

$220

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

    import {Component, AfterViewInit, QueryList, ViewChildren} from '@angular/core';
    export class FoodInfo implements AfterViewInit{}
    ngAfterViewInit(){}
    //获得子组件的集合
    @ViewChildren(Count) listCount: QueryList<Count>;
    2022-10-29 13:44 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有