Question

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

加载第一页后，我想分享app组件变量到搜索组件。两者都在第一页上加载。我怎么能这样做？

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

}

如何在搜索组件中检索？

Answer 1

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

这些是基础：

<强> LanService

string

<强>的SearchComponent

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);
  }
}

<强> AppComponent

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

Answer 2

有几种方法可以实现预期的目标：

创建共享服务（在根模块中提供它，因此您只有一个实例），在其上存储属性并跨组件共享
使用某种商店系统，例如ngrx
使用Input - s和Output - s并提醒更改父组件，以便为所有子组件更改

任何此解决方案都可以使用，具体取决于您可以选择其中任何一个的任务。

Answer 3

最好的办法是创建一个共享服务并在层次结构中注册一个级别

或者只为整个应用程序保留共享服务，并在需要的地方注入。

Answer 4

您可以轻松使用输入输出 让我猜你的HTML流程并给出解决方案

首页html

<html>
    <head>
    <title>First page</title>
    </head>
    <body>
        <app-component (onSearchChange)="onSearchChange($event)"></app-component>
        <search-component [searchValue]="searchValue"></search-compoenent>
    </body>
</html>

第一页ts

public searchValue:any
onSearchChange(data:any){
    this.searchValue = data;
}

app-component html

<div>
        <input [ngModel]="selectedItem" (ngModelChange)="onChange($event)"/>
    </div>

APP-component.ts

@Output() onSearchChange = new EventEmitter<any>();
onChange(){
    this.onSearchChange.emit(this.selectedItem);
}

搜索compoenent ts

@Input() public searchValue: any;
ngOnChanges(changes: any) {
    if (typeof changes.searchValue !== 'undefined') {
        console.log('filter changes value',changes);
    }
}

Angular 4如何共享变量

4 个答案: