首页 文章

尝试将服务属性获取到组件 . 但不断回归未定义

提问于
浏览 次
0

我正在尝试在兄弟组件之间共享数据（下面的组件在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;
      }
angular typescript angular-services angular-components

2 回答

  • 1

    问题出在这里：

    providers: [ProjectTaskDataService]

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

    要在兄弟组件之间共享服务，请将其注册到模块的providers数组中 .

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

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

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

    回复于
  • 0

    服务是一个单身人士，我想你已经在组件中提供了相同的服务，

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

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

    回复于

相关问题