正在尝试为组件获取服务属性。但不断返回 undefined

Question

我正在尝试在同级组件之间共享数据（下面的组件在 for 循环中，在视图中）。

我已经设置了一个服务，以便我可以存储一个变量，这些同级组件可以访问该变量。问题是当我尝试通过组件方法从服务访问一个值时，它返回为未定义。我可以将一个数字传递给服务并更新它，但是当我尝试检索它时，我做不到。

有趣的是，如果您在构造函数中控制台记录服务值，它会检索一些东西。

有人可以帮忙吗？我已尽力按照 Max 的服务章节进行操作，但我似乎什么也没得到。

服务

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

问题出在这里：

providers: [ProjectTaskDataService]

通过在 组件的 providers 数组中注册服务，组件的实例仅与该组件及其子组件共享。

要在同级组件之间共享服务，请改为在模块的提供程序数组中注册它。

或者更好的是，如果您使用的是 Angular 6 或更高版本，请为服务使用新的 providedIn 注册技术：

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

这会向应用程序的根注入器注册服务，然后在应用程序的所有组件之间共享服务实例。

Answer 2

服务本来就是单例的，我猜你在两个组件中都提供了相同的服务，

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

因此正在创建两个服务实例。现在，这些服务是两个独立的服务，在一个服务中进行更改不会更新另一个服务中的更改。所以基本上你可以在声明两个组件的模块级别或在这些组件的父组件中提供服务。（在模块中提供会更好）

正在尝试为组件获取服务属性。但不断返回 undefined

Trying to get service property to a component. But keeps coming back as undefined

typescript

angular-services

angular-components

angular

正在尝试为组件获取服务 属性。但不断返回 undefined

Trying to get service property to a component. But keeps coming back as undefined

typescript

angular-services

angular-components

angular

正在尝试为组件获取服务属性。但不断返回 undefined