Использование Angular Service для предоставления данных в другой компонент - PullRequest
Новая
       1

Использование Angular Service для предоставления данных в другой компонент

0 голосов
/ 14 марта 2019

Мое намерение - отправить данные из одного компонента в другой. Пользователь может выбирать между 3 различными предложениями - события клика предоставляют разные данные (в данном случае номера от 1 до 3) - эти данные сохраняются в Отправителе как «selectedDiv» - ( следующее не работает ) данные из «selectedDiv» должны быть отправлены в Reciever, и также должно быть обновлено, когда «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() {
  }

}

Edit: Первый подход показал следующую ошибку: this.selectedService.changeNumber не является функцией

Снимок экрана от Авгурия (принимающий компонент почему-то остается пустым):

Отправка свадебного компонента: WeddingComponent

Получение контактного компонента: ContactComponent

1 Ответ

2 голосов
/ 14 марта 2019

Проблема в том, что вы предоставляете SelectedService непосредственно в компонентах, поэтому вы получаете два разных экземпляра одного и того же класса.

У вас есть 3 решения:

  • Зарегистрируйте провайдера в родительском компоненте обоих WeddingComponent и ContactComponent
  • Зарегистрируйте провайдера в модуле, содержащем оба WeddingComponent и ContactComponent
  • Добавить provideIn: root какпараметр декоратора Injectable непосредственно в сервисе

В зависимости от объема услуги вам необходимо выбрать один из вариантов.

...