使用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() {
  }

}

Reciever：

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装饰器的参数

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