一旦服务的变量值发生变化，如何重新加载组件的html

Question

我正在使用名为“globalVariables”的服务在应用程序模块之间共享数据。组件，在该服务内部有一个名为'var'的变量 并且有两个组件A，B使用该服务和'var'变量。 一旦组件B改变了特定变量的值属于service x。

，如何重新加载组件A的html

这是A组件的代码：

    <div>
            <div>
                  <app-header> </app-header>
            </div>
            <app-side-nav-bar [input] = "globalVariables.selectedModule" > 
            </app-side-nav-bar>
   </div>

输入脚本代码：

import { Component } from '@angular/core';
import { GlobalVariablesService } from './shared/global_variables.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class A {
   constructor(public globalVariables: GlobalVariablesService) {


    }
}

Answer 1

可观察

您可以在observables中使用GlobalVariablesService，然后其他组件订阅可观察对象，并在更改next时致电var，然后会通知组件刷新（取决于如何订阅）

<强> @Output

另一种方法是使用@Output和事件发射器在值发生更改时发出和事件，然后组件订阅该事件并在var更改时收到通知

<强> NG2-简单全局

另一种方法是使用ng2-simple-global npm包，请参阅here中的示例

Answer 2

我可以想到两个选择：

使用Observable

共享值存储在Observable中。当值发生变化时，Observable将发出此更改，并通知所有订阅者。 因此，您的服务有一个getValue(): Observable<ValueType>方法，您的组件可以订阅该方法，以及setValue(value)方法，该方法在Observable上调用.next(value)，以便通知所有订阅者。

在此blog article中详细了解此模式。 （提示：在同一方向采用更先进的方法是使用Redux。）

使用@Input和@Output

当某些内容发生更改并且更改通过@Output属性向下传递到组件树时，组件不会使用服务，而是通过@Input属性发出事件。