我首先加载应用程序组件,然后根据路由加载其他页面。
加载第一页后,我想将应用程序组件变量共享给搜索组件。两者都在第一页上加载。我该怎么做?
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组件中检索?
最佳答案
我建议为您的用例构建一个服务。 您将在搜索组件中订阅该服务并等待更新。在应用程序组件中,您将在语言更改后立即向服务发送更新。这使用了 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
}
关于Angular 4 如何共享变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47591984/