使用Angular Service将数据提供到不同的组件中

Question

我的目的是将数据从一个组件发送到另一个组件。用户可以在3个不同的报价中进行选择-点击事件提供不同的数据（在这种情况下，编号为1到3）-这些数据以“ selectedDiv”的形式保存在发件人中-（以下操作无效）来自“ selectedDiv”的数据应发送到接收方，并且当发送组件中的“ selectedDiv”发生更改时，也将进行更新。

我已经在stackoverflow.com上找到了建议，但是没有一个对我有用。

总结： 应该发送数据的组件包含要转发给其他组件的数字。

我到目前为止的进展：

服务：

export class SelectedService {
  selectedDiv: number;

  changeNumber(div: number) {
    this.selectedDiv = div;
  }
}

发件人：

import { Component, OnInit } from '@angular/core';
import {SelectedService} from '../selected.service';

@Component({
  selector: 'app-wedding',
  templateUrl: './wedding.component.html',
  styleUrls: ['./wedding.component.css'],
  providers: [SelectedService]
})
export class WeddingComponent implements OnInit {

  selectedDiv: number;

  public onChoose(event): void {
    this.selectedDiv = event;
    this.selectedService.changeNumber(this.selectedDiv);

  }

  constructor(private selectedService: SelectedService) {

  }

  ngOnInit() {
  }

}

收件人：

import { Component, OnInit } from '@angular/core';
import {SelectedService} from '../selected.service';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css'],
  providers: [SelectedService]
})
export class ContactComponent implements OnInit {

  selectedDiv: number;

  constructor(private selectedService: SelectedService) {
    this.selectedDiv = this.selectedService.selectedDiv;
  }

  ngOnInit() {
  }

}

编辑： 第一种方法显示以下错误： this.selectedService.changeNumber不是函数

Augury的屏幕截图（接收组件以某种方式保持空白）：

发送WeddingComponent： WeddingComponent

接收ContactComponent： ContactComponent

Answer 1

问题是您直接在组件中提供了SelectedService，因此您将获得同一类的两个不同实例。

您有3种解决方案：

• 在WeddingComponent和ContactComponent的组件父级中注册提供程序
• 在同时包含WeddingComponent和ContactComponent的模块中注册提供程序
• 直接在服务中添加provideIn: root作为Injectable装饰器的参数

根据服务范围，您需要选择一个选项。