Попытка получить свойство сервиса для компонента.Но продолжает возвращаться как неопределенный

Question

Я пытаюсь обмениваться данными между одноуровневыми компонентами (представленный ниже компонент находится в цикле for, в представлении).

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

Интересно то, что если вы консоль записываете значение службы в конструкторе, оно будетполучить что-то.

Кто-нибудь может помочь с этим?Я пытался следовать главе службы Макса как можно лучше, но, похоже, ничего не получаю.

Служба

export class ProjectTaskDataService {

  currentTaskId = 0;

  logTaskSelectionChange(selected_task_id: number) {
    this.currentTaskId = selected_task_id;
  }

  public getSelectedTaskId() {
    return this.currentTaskId;
  }
}

Компонент

import { Component, OnInit, Input } from '@angular/core';
import {ProjectTaskDataService} from '../../../../services/project-task-data.service';

    @Component({
      selector: '[app-section-tasks]',
      templateUrl: './section-tasks.component.html',
      styleUrls: ['./section-tasks.component.css'],
      providers: [ProjectTaskDataService]
    })
    export class SectionTasksComponent implements OnInit {

      @Input() taskItemData: {id: number, name: string, date: string, type: string, status: string}

      taskId: number;
      taskName: string;
      taskDate: string;
      taskType: string;
      taskStatus: string;

      taskSelected = false;

      // This is the value that stores the ID for the current selected task for the section...
      sectionSelectedTaskId: number;


      constructor(private projectTaskDataService: ProjectTaskDataService) { }

      ngOnInit() {
       // console.log(this.taskItemData);
        this.taskId = this.taskItemData.id;
        this.taskName = this.taskItemData.name;
        this.taskDate = this.taskItemData.date;
        this.taskType = this.taskItemData.type;
        this.taskStatus = this.taskItemData.status;

        // Returns 0, if called here
        console.log(this.projectTaskDataService.currentTaskId);
      }

      selectTask(id: number) {
        // This will return 'undefined'
        console.log('Distraction ', this.projectTaskDataService.getSelectedTaskId());
        this.projectTaskDataService.logTaskSelectionChange(id);
        this.sectionSelectedTaskId = this.projectTaskDataService.currentTaskId;
      }

Answer 1

Сервис подразумевается как одноэлементный. Я полагаю, вы предоставили одинаковый сервис в обоих компонентах,

[provider]="ProjectTaskDataService" in component1
[provider]="ProjectTaskDataService" in component2

, из-за которого создаются два экземпляра сервиса.Теперь эти сервисы являются двумя отдельными сервисами, вносящими изменения в один, не будут обновлять изменения в другом сервисе.Таким образом, в основном вы можете предоставлять услуги на уровне модуля, где оба компонента объявлены, или в родительском компоненте этих компонентов.(Представьте в модуле будет лучше)

Answer 2

Проблема здесь:

providers: [ProjectTaskDataService]

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

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

Или еще лучше, если вы используете Angular 6 или выше, используйте новый метод регистрации providedIn дляservice:

@Injectable({
  providedIn: 'root'
})
export class MyService {
 }

Служит для регистрации службы с помощью корневого инжектора приложения, после чего экземпляр службы распределяется между всеми компонентами приложения.