Angular 4 如何共享变量

Question

我首先加载应用程序组件，然后根据路由加载其他页面。

加载第一页后，我想将应用程序组件变量共享给搜索组件。两者都在第一页上加载。我该怎么做？

change(lan) {
  // I wanna send this lan variable to search component,   
  // this time search component loaded already in routing
}

流程是这样的:

第一次加载搜索组件和应用程序组件。

之后我会改变一个变量。

我应该可以在搜索组件中找到它。

HTML

<router-outlet></router-outlet>
<div class="height-40 col-xs-12 bgcolor-EF bottom-panel">
    <a href="javascript:void(0);" (click)="change('en')">English</a> | <a href="javascript:void(0);" (click)="change('pa')">Español</a>
</div>

TS

change(lan) {

}

如何在Search组件中检索？

Answer 1

我建议为您的用例构建一个服务。您将在搜索组件中订阅该服务并等待更新。在应用程序组件中，您将在语言更改后立即向服务发送更新。这使用了 Observables 的原理，这是 Angular 的重要组成部分。在示例中，我使用了 BehaviorSubject 而不是普通的 Subjects/Observable，因为它们会在您订阅后立即为您提供默认值(或它们收到的最后更新值)。

这些是基础知识:

局域网服务

export class LanService{

  //default language
  private lan:BehaviorSubject<string> = new BehaviorSubject<string>('en');

  public getLan(){
    return this.lan.asObservable();
  }

  public updateLan(lan){
    this.lan.next(lan);
  }
}

搜索组件

constructor(private ls:LanService){
  this.ls.getLan().subscribe(lan => console.log(lan));
}

应用组件

change(lan){
  this.ls.updateLan(lan); //assuming you injected ls:LanService in constructor
}