typescript - Angular 4 Ako zdieľať premenné

Najprv načítavam komponentu aplikácie a na základe smerovania načítavam ostatné stránky.

Po načítaní prvej stránky chcem zdieľať premennú komponentu aplikácie s komponentom vyhľadávania. Oba sa načítavajú na prvej stránke. Ako to môžem urobiť?

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

Tok je takto:

Prvýkrát sa načítajú komponent vyhľadávania a komponent aplikácie.

Po tom zmením premennú.

To by malo byť pre mňa k dispozícii v komponente vyhľadávania.

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

}

Ako získať v komponente Hľadanie?

Odpoveď č. 1

Odporúčam vytvoriť službu pre váš prípad použitia. Na službu sa prihlásite v komponentne vyhľadávania a čakáte na aktualizácie. V komponentne aplikácie odošlete aktualizáciu do služby hneď, ako sa zmení jazyk. Toto využíva princíp observables, ktorý je veľkou súčasťou Angularu. V príklade som použil BehaviorSubject namiesto bežných Subjects/Observable, pretože vám poskytnú predvolenú hodnotu (alebo poslednú prijatú aktualizovanú hodnotu) hneď, ako sa prihlásite.

To sú základy:

LanService

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

KomponentVyhľadávania

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

AppComponent

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

Odpoveď č. 2

Existuje niekoľko metód, ktorými môžete dosiahnuť svoj želaný cieľ:

  1. Vytvorte zdieľanú službu (poskytnite ju v koreňovom module, aby ste mali iba jednu jej inštanciu), uložte na ňu vlastnosť a zdieľajte ju medzi komponentmi
  2. Použite nejaký druh systém obchodu, ako napríklad ngrx
  3. Použite Input-y a Output-y a upozornite na zmeny rodičovskú komponentu, aby ich zmenila pre všetky deti

Ktorékoľvek z týchto riešení bude fungovať, v závislosti od vašej úlohy si môžete vybrať ktorékoľvek z nich.

Súvisiace články