通过 angular 2 中的多个组件访问服务的 属性？

Question

我有 属性 在组件 1 中计算，我正在使用服务访问和存储 属性 并从另一个组件访问 属性 值，但是该值是没有反映在另一个组件中。我做错了什么

组件 1

 import { Component, AfterViewInit } from '@angular/core';
import { CrosspropertiesService } from "../services/Crossproperties.service";
@Component({
  selector: 'app-timer',
  templateUrl: './timer.component.html',
  styleUrls: ['./timer.component.css'],
  providers:[CrosspropertiesService]
})
export class TimerComponent implements AfterViewInit {
  constructor(private crossproperties: CrosspropertiesService) { }
  public projectheader: number = 959 ;//lets assume
  ngAfterViewInit() {
    this.projectheader = this.crossproperties.projectHeaderWidth;
    console.log(this.crossproperties.projectHeaderWidth);// console has value 959
    }

  }

}

组件 2

    import { Component, AfterViewInit, Input } from '@angular/core';
    import { CrosspropertiesService } from "../../services/Crossproperties.service";
    @Component({
      selector: 'app-projects',
      templateUrl: './projects.component.html',
      styleUrls: ['./projects.component.css'],
      providers:[CrosspropertiesService]
    })
    export class ProjectsComponent implements AfterViewInit {

      constructor(private crossproperties: CrosspropertiesService ) { }

      public headerWidth :number;
      ngAfterViewInit() {
        this.headerWidth= this.crossproperties.projectHeaderWidth;
        console.log(this.headerWidth); //console has value undefined 
      }

和服务文件

import { Injectable } from '@angular/core';
@Injectable()
export class CrosspropertiesService {
  public projectHeaderWidth:number;
  constructor() { }
}

Answer 1

如果将服务添加到组件上的 providers 数组，每个组件都会获得自己的实例服务。

从组件中删除 providers 属性 并将其添加到父组件或 NgModule

@NgModule({
  ...
  providers: [CrosspropertiesService]
})
export class AppModule {}