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

Question

我正在与 Angular 一起开发测验应用程序。我需要在我的 ResultsComponent 中获取 correctAnswersCount 的值。当我真的需要测验结束时的总正确答案的值时，我在 ResultsComponent 中得到 correctAnswersCount 的值 0，并且在测验期间也得到 1166 的值来代替 correctAnswersCount。我认为代码看起来是正确的，只是我得到的值是错误的。不知道我做错了什么。这是我的代码：

在我的测验服务中：

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

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

在我的 DI 测验组件中：

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

请你帮忙。谢谢。

Answer 1

我会给你一些有用的提示。

您应该在 QuizService 上使用 @Injectable({providedIn: 'root' }) 以保证此服务在整个应用程序中的单一实例。
在 DI-Quiz 组件中，在订阅的回调中调用 this.sendCountToQuizService。
在 ResultsComponent 中，在 OnInit 挂钩上初始化订阅（可能使用管道异步来显示计数值）。

编辑：

我认为您以某种方式在 DIQuizComponent 上创建递归事件，方法是在同一个地方订阅和发送新值到同一个 Subject。由于 correctAnswersCountSubject 是一个 BehaviorSubject，您可以使用 getValue 方法获取 correctAnswersCountSubject 的值而无需订阅它。

这次我在 stackblitz 上创建了一个演示，希望对您有所帮助。

再次编辑：

我已经调试了您的代码并通过一些修改解决了所有问题，它们是：

在 QuizQuestionComponent，在响应 EventEmitter 上添加装饰器 @Output()。
at DependencyInjectionQuizComponent，在 nextQuestion 方法中，this.answer 在调用需要答案值的 checkIfAnsweredCorrectly 方法之前设置为 null。
在 DependencyInjectionQuizComponent，你没有递增 this.count，我是在 checkIfAnsweredCorrectly 方法上做的。
最重要的是，我删除了模块中的所有提供程序以保证服务的单例实例。

此处演示：stackblitz

Answer 2

如果你想在组件之间传递数据，你有几个选择。我不会假设任何关于你的场景以及这些是否会起作用，因为实际上很多时候当我们是新手时，我们意识到我们需要稍微重新架构我们的组件以实现我们想要的，所以相反，我将分享您可用的方法。

标准数据绑定

如果您尝试将数据从父组件传递到子组件，您可以在将组件添加到父组件时简单地绑定数据。

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 等

如果你想拥有一些真正强大的数据存储和数据传递能力，我强烈建议你通过 NGRX 探索像 redux 这样的状态管理解决方案。

NGRX 很棒。起初对一些人来说有点吓人，但好处是疯狂的！想象一下，在模块 x 中需要来自模块 y 的数据，而这两个模块都没有通过组件连接？好吧，在那种情况下，您将无法将数据向上 and/or 传递到组件树下，但您可以使用 redux。

希望这对您有所帮助。

Answer 3

简单的解决方案是将服务用作存储正确答案计数的存储。请找到以下解决方案：

在您的服务中声明一个私有变量，并在服务中为其编写 getter 和 setter，如下所示：

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;
}

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

How do I pass data from one component to another in Angular?

rxjs

behaviorsubject

angular