Angular передача данных из одного компонента в другой - PullRequest
Новая
       73

Angular передача данных из одного компонента в другой

0 голосов
/ 20 апреля 2020

Я работаю над приложением викторины с Angular. Мне нужно получить значение correctAnswersCount в моем ResultsComponent. Я получаю значение 0 для correctAnswersCount в ResultsComponent, когда мне действительно нужно значение итоговых правильных ответов в конце теста, а также получаю значение 1166 во время теста вместо correctAnswersCount. Я думаю, что код выглядит правильно, просто полученное значение неверно. Не уверен, что я делаю не так. Это мой код:

в моем QuizService: 

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

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

в моем компоненте DI-Quiz: 

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

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

и в моем ResultsComponent: 

    constructor(private quizService: QuizService) {}

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

Пожалуйста, вы можете помочь. Спасибо.

Ответы [ 3 ]

2 голосов
/ 21 апреля 2020

Я дам вам несколько советов, которые помогут мне.

  • Вы должны использовать @Injectable({providedIn: 'root' }) в QuizService, чтобы гарантировать единичный экземпляр этой службы во всем приложении.
  • В Компонент DI-Quiz, вызовите this.sendCountToQuizService внутри функции обратного вызова подписки.
  • В ResultsComponent инициируйте подписку на ловушке OnInit (возможно, используйте pipe asyn c для отображения значения счетчика).

Редактировать:

Я думаю, что вы как-то создаете рекурсивные события в DIQuizComponent, подписываясь и отправляя новые значения тому же субъекту в том же месте. Поскольку correctAnswersCountSubject - это BehaviorSubject, вы можете получить значение correctAnswersCountSubject, не подписываясь на него, используя метод getValue.

На этот раз я создал демонстрационную версию stackblitz , надеюсь, это поможет.

Отредактировано еще раз:

Я отлаживал ваш код и с некоторыми изменениями я решил все проблемы, и они:

  • в QuizQuestionComponent, добавьте декоратор @Output () в ответе EventEmitter.
  • в DependencyInjectionQuizComponent, в методе nextQuestion this.answer устанавливается равным нулю, прежде чем вызывать метод checkIfAnsededC корректно, которому необходимо значение ответа.
  • в DependencyInjectionQuizComponent, вы не увеличиваете this.count, я сделал это с помощью метода checkIfAnsptedC корректно.
  • И самое главное, я удалил всех провайдеров в модулях, чтобы гарантировать единичные экземпляры сервисов.

Демо здесь: stackblitz

0 голосов
/ 29 апреля 2020

Простым решением будет использование сервиса в качестве хранилища для хранения правильного количества ответов. Пожалуйста, найдите решение ниже:

В вашем сервисе объявите одну личную переменную и запишите для нее методы получения и установки, как показано ниже: 

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;
}
0 голосов
/ 21 апреля 2020

Если вы хотите передавать данные между компонентами, у вас есть несколько вариантов. Я не собираюсь предполагать что-либо о вашем сценарии и о том, сработают ли они, потому что на самом деле много раз, когда мы новички, мы понимаем, что нам нужно немного изменить архитектуру наших компонентов, чтобы достичь того, чего мы хотим, поэтому Вместо этого я поделюсь доступными вам методами.

Стандартное связывание данных

Если вы пытаетесь передать данные из родительского компонента в дочерний компонент, вы можете просто привяжите данные при добавлении компонента к родительскому компоненту.

parent.component. html

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

child.component.ts 

@Input() myData: <YourType>;

Передача данных вверх

Если вы пытаетесь передать данные от дочернего компонента к родительскому компоненту, вы можете передать свои значения вверх по дереву компонента (он же всплывает вверх по дереву компонента)

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>();

Сейчас, те, которые выпекаются в решениях, которые выходят из коробки с Angular.

Управление состоянием, т. Е. Redux, et c.

Я настоятельно рекомендую вам изучить решения для управления состоянием, такие как Redux через NGRX, если вы хотите иметь некоторые действительно потрясающие возможности хранения и передачи данных.

NGRX потрясающе. Поначалу это немного пугает, но преимущества безумны! Представьте, что вы находитесь в модуле x и нуждаетесь в данных из модуля y, и ни один из них не связан компонентом? В этом сценарии вы не сможете передавать данные вверх и / или вниз по дереву компонентов, но вы можете это сделать с помощью redux.

Надеюсь, это поможет.

...