Angular 5服务数据未更新

Question

我正在放慢从 AngularJS 到 Angular(2+) 的迁移速度，并且偶然发现了一些东西。

在 AngularJS 中，我使用了很多工厂和服务来跨指令、控制器和其他服务共享数据。可以轻松地在一处更新服务并自动更新其他地方。

但是，我尝试在 Angular 5 中以类似的方式使用服务，但当我更改服务变量时，“什么也没发生”。

我见过一些解决方案，涉及创建“拉取”新数据的函数或建议更新“Angular 更改服务”以将事件绑定到变量。

但是，我的应用程序在许多位置使用了许多变量。我必须在使用它们的每个组件中单独订阅每个变量，并更改服务以对每个变量发出更改，这似乎并不正确。

我只是错过了什么吗？

谢谢！！！韦恩

例如：

主页的组件。

import { Component, OnInit } from '@angular/core';
import { HomeButtonDirective } from '../home-button.directive';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

在主页上重复使用的按钮的指令：

import { Directive, Input, OnInit, HostListener } from '@angular/core';
import { InfoService } from './info.service';

@Directive({
  selector: '[appHomeButton]',
  providers: [InfoService]
})
export class HomeButtonDirective {
  @HostListener('click', ['$event']) onclick($event) {
    this.info.showHome = false;
  }
  constructor(private info: InfoService) { }

  ngOnInit() {
  }

}

应用程序组件。如果 showHome===true 将显示主页：

import { Component } from '@angular/core';
import { InfoService } from './info.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [InfoService]
})
export class AppComponent {
  title = 'Testing a service';
  showHome = true;

  constructor(private info: InfoService) {
    this.showHome = this.info.showHome; // this works...showHome becomes false per the service (see below)
  }

 }

最后，服务：

import { getTestBed } from '@angular/core/testing';
import { Injectable } from '@angular/core';

@Injectable()

export class InfoService {
    showHome = false;
 }

Answer 1

\n

很容易在一个地方更新服务并自动更新\n其他地方的服务。

\n

\n\n

使用 Angular 模块而不是组件注册服务。

\n\n

\n

来自Angular\n 文档

\n\n

Angular 模块提供程序(@NgModule.providers)向应用程序的根注入器注册。Angular 可以在它创建的任何类中注入相应的服务。创建后，服务实例将在应用程序的生命周期中存在，并且 Angular 会将这一服务实例注入到每个需要它的类中。

\n

\n\n

总结一下

\n\n

如果我们希望全局共享依赖项的实例并state在应用程序之间共享，我们可以将其配置在NgModule.

\n\n

如果我们希望在组件的每个实例及其子组件之间共享依赖项的单独实例，我们可以在组件providers属性上配置它。

\n