Angular 如何重新加载组件'；s html一次服务'；s变量值已更改

我正在使用一个名为“globalVariables”的服务在应用程序模块和组件之间共享数据，在该服务中有一个名为“var”的变量 有两个组件A和B正在使用该服务和“var”变量。 一旦组件B更改了属于服务x的特定变量的值，如何重新加载组件A的html

以下是组件的代码：

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

---

可观察的

您可以在您的

GlobalVariablesService

中使用

observatives

，然后其他组件订阅observatives，当

var

发生更改时，您调用

next

，然后将通知组件并刷新（取决于订阅方式）

@输出

另一种方法是使用

@Output

和事件发射器在值更改时发出和事件，然后组件订阅该事件并在

var

更改时收到通知

ng2简单全球

---

另一种方法是使用ng2简单全局包，请参见可观察的示例

您可以在您的

GlobalVariablesService

中使用

observatives

，然后其他组件订阅observatives，当

var

发生更改时，您调用

next

，然后将通知组件并刷新（取决于订阅方式）

@输出

另一种方法是使用

@Output

和事件发射器在值更改时发出和事件，然后组件订阅该事件并在

var

更改时收到通知

ng2简单全球

---

另一种方法是使用ng2简单全局包，请参见中的示例。我可以想到两种选择：

使用可观察的 共享值存储在一个可观察值中。当值发生变化时，可观测对象将发出该变化，并随之通知所有订户。 因此，您的服务有一个

getValue（）：Observable

方法，组件可以订阅该方法，还有一个

setValue（value）

方法，该方法在Observable上调用

。next（value）

，以便通知所有订阅者

在本文中阅读更多有关此模式的信息。（提示：同一方向的更高级方法是使用Redux。）

使用

@输入

和

@输出

---

组件不使用服务，而是在某些内容发生更改时，通过

@Output

属性发出事件，并且更改通过

@Input

属性向下传递到组件树

我可以想出两个选择：

使用可观察的 共享值存储在一个可观察值中。当值发生变化时，可观测对象将发出该变化，并随之通知所有订户。 因此，您的服务有一个

getValue（）：Observable

方法，组件可以订阅该方法，还有一个

setValue（value）

方法，该方法在Observable上调用

。next（value）

，以便通知所有订阅者

在本文中阅读更多有关此模式的信息。（提示：同一方向的更高级方法是使用Redux。）

使用

@输入

和

@输出

组件不使用服务，而是在某些内容发生更改时，通过

@Output

属性发出事件，并且更改通过

@Input

属性向下传递到组件树

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) {


    }
}