如何在 Angular 中将数据从一个组件传递到另一个组件？

Question

I am working on a quiz app with Angular. I need to get the value of correctAnswersCount in my ResultsComponent. I'm getting the value of 0 for correctAnswersCount in ResultsComponent when I really need the value of the total correct answers at the end of the quiz, and also getting value of 1166 during the quiz in place of correctAnswersCount. I think the code looks correct, just the value that I'm getting is wrong. Not sure what I'm doing wrong. This is my code:

in my QuizService:

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

      sendCountToResults(value) {
        this.correctAnswersCountSubject.next(value);
      }
    }

in my DI-Quiz Component:

    ngOnInit() {
      this.quizService.correctAnswersCountSubject.subscribe(data => {
        this.count = data + 1;
      });
      this.sendCountToQuizService(this.count); 
    }

    sendCountToQuizService(count) {
      this.quizService.sendCountToResults(count);
    }

and in my ResultsComponent:

    constructor(private quizService: QuizService) {}

    ngOnInit() {
      this.quizService.correctAnswersCountSubject.subscribe(data => {
        this.correctAnswersCount = data;
      });
    }

Please can you help. Thank you.

Answer 1

I will give you some tips that my help.

• You should use @Injectable({providedIn: 'root' }) on QuizService to guarantee a singleton instance of this service across the whole app.
• At DI-Quiz Component, call this.sendCountToQuizService inside the callback of the subscription.
• At ResultsComponent, init the subscription on the OnInit hook (maybe use pipe async to display the count value).

Edit:

I think you are somehow creating recursive events at DIQuizComponent by subscribing and sending new values to same Subject on the same place. As correctAnswersCountSubject is a BehaviorSubject, you can get the value of correctAnswersCountSubject without subscribing to it using getValue method.

This time i've created a demo on stackblitz , hope this helps.

Edited Again:

I've debugged your code and with some modifications I resolved all problems and they are:

• at QuizQuestionComponent , add the decorator @Output() on answer EventEmitter.
• at DependencyInjectionQuizComponent , on the nextQuestion method, this.answer is set as null before call the checkIfAnsweredCorrectly method who needs the answer value.
• at DependencyInjectionQuizComponent , you are not incrementing the this.count, I did it on the checkIfAnsweredCorrectly method.
• And the most important thing, I removed all providers in the modules to guarantee a singleton instances of the services.

Demo here: stackblitz

Answer 2

If you want to pass data between components you have a couple of options. I'm not going to assume anything about your scenario and whether these will work, because in reality a lot of times when we are new, we realize that we need to slightly re-architect our components in order to achieve what we want, so instead, I will share the methods available to you.

Standard Data Binding

If you are trying to pass data from a parent component to a child component, you can simple bind the data when you add your component to the parent component.

parent.component.html

<child-component [myData]="myDataAsIsInParentComponent"></child-component>

child.component.ts

@Input() myData: <YourType>;

Emitting Data Upwards

If you are trying to pass data from a child component to a parent component, you can emit your values up the component tree (aka bubbling up the component tree)

parent.componenent.html

<child-component (myEmitter)="functionToCallInParent($event)"></child-component>

parent.component.ts

functionToCallInParent($event) {
  const myPassedData = $event;
}

child.component.ts

@Output myEmitter: EventEmitter<myType> = new EventEmitter<myType>();

Now, those are baked in solutions that come out-of-the box with Angular.

State Management ie Redux, etc.

I highly suggest that you explore state management solutions like redux via NGRX if you want to have some truly awesome data storage and data passing powers.

NGRX is amazing. It's a bit intimidating for some at first, but the benefits are insane? Imagine being in module x and needing data from module y and neither module is connected by a component, Well you wouldn't be able to to pass the data up and/or down the component tree in that scenario. but you can with redux.

Hope this helps.

Answer 3

Simple solution will be using service as store for storing correct answers count. Please find below solution:

In your service declare one private variable and write getters and setters for it in service as below:

private correctAnswerCount:number;

//if you are calling this method for each correct answer
incrementCorrectAnswerCount(){
this.correctAnswerCount++;
}

//if you are calling this method once
setCorrectAnswerCount(value:number){
this.correctAnswerCount = value;
}

//you can fetch this method from any compononent so as the value of correctAnswerCount
getCorrectAnswerCount(){
return this.correctAnswerCount;
}