如何与Angular 8中的其他组件进行通信以添加总计 [英] How to communicate with other component in Angular 8 to Add Total

问题描述

我是Typescript的新手，我正在创建Cost Calculator应用程序.我有8个问题，分别作为组件和totalCost组件.每个问题都有3个不同的选项可供选择.选择选项后，我希望总成本"随着用户在问题中的进展而加起来.用户回答了最后一个问题后，我便向他总结了总成本".

I'm new to Typescript, i'm working on creating Cost calculator application. I have 8 question as separate components and totalCost component. Each question have 3 different options to select. upon selecting option I want Total cost to add up as user progress in questions. Once user answer final question I was summary to present him with Total Cost.

我做了研究，遇到了不同的答案，但是似乎没有一个对我有用.给出的大多数答案都在JS中.

I did research and came across different answers but non of them seems to be working for me. Most of the answers given are in JS.

我尝试使用 rxjs/BehaviorSubject 库，但出现了错误.这是我的代码.

I tried using rxjs/BehaviorSubject library but got error. Here is my code.

totalCost.component.ts

totalCost.component.ts

import { Component, Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';

 @Component({
   selector: 'totalcost',
   template: `<div>
    <p>Total: {{totalCost}}
   </div>`

 })

 @Injectable({
  providedIn: 'root'
})
 export class TotalCost {


  private totalCost = new BehaviorSubject<number>(0);
  currentCost = this.totalCost.asObservable();

  constructor(){

  }

     addCost(add: number){
       this.totalCost.next(add);
       console.log('addCost');
        return this.totalCost;
     }



 }

这是第一个问题部分:

import { Component, OnInit, Injectable } from '@angular/core';
import { TotalCost } from '../totalCost/totalCost.component';

@Injectable({
  providedIn: 'root'
})
 @Component({
   selector: 'first',
   templateUrl: './first.component.html',
   styleUrls: ['./first.component.scss']
 })



export class First {

    totalCost: number;


    constructor(private cost: TotalCost){

    }

   ngOnIt(){
      this.cost.currentCost.subscribe(totalCost => this.totalCost = totalCost )
    }

    addToCost(value: number){
      this.cost.addCost(value);
      console.log('addToCost()');
    }

 } 

这是第一个问题的HTML:

here is HTML for First Question:

<div class="container-fluid text-center">
  <div>
    <h3>Choose The Type Of Website</h3>
    <input type="range" value="1000" id="budget">
    <p>
      <span>
        <a [routerLink]="'/second'" (click)="addToCost(1000)"><img src="" alt="static"></a>
      </span>
      <span>
        <a [routerLink]="'/second'" ><img src="" alt="Dynamic"></a>
      </span>
      <span>
        <a [routerLink]="'/second'" ><img src="" alt="E-Commerce"></a>
      </span>
    </p>
  </div>
</div>

当用户选择一个选项时，我希望总费用"加起来直到用户到达最后一个问题.

When user select one of the option I want Total cost to add up until user reach last question.

这是我的应用程序的样子

This is what my application look like

推荐答案

您可以尝试这样.
创建一项包含您的主题的常用服务.

You can try like this.
Create one common service which one contains your subject.

common.service.ts

@Injectable({
  providedIn: 'root'
})
export class CommonService {
  private totalCost = new BehaviorSubject<number>(0);

  sendMessage(data: any) {
     this.totalCost.next(data);
  }
  getMessage(): Observable<any> {
     return this.totalCost.asObservable()
  }
}

ComponentA //要发送数据的组件

ComponentA // component which you want to send the data

export class ComponentA {
// here we are adding our common service which contain our subject
    constructor(private brodcaster: CommonService){}

    sendData(data) {
     this.brodcaster.sendMessage(data);
    }

ComponentB //您要访问数据的组件

ComponentB // component which you want to access the data

export class ComponentA {
    // here we are adding our common service which contain our subject
    constructor(private brodcaster: CommonService){
     this.brodcaster.getMessage().subscribe(response => {
        console.log(response);
     })
    }

这篇关于如何与Angular 8中的其他组件进行通信以添加总计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！