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

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

试图获取组件的服务属性。但是不断返回未定义

2 个答案: