Angular4 navbar-Wert in einer untergeordneten Komponente ändern

Question

Nehmen wir an, wir haben eine Navigationsleiste mit Dropdown-Menü, mit der Sie eine Stadt auswählen können. Wenn wir eine Stadt wählen, werden wir zu http://Domain/:city umgeleitet und normalerweise sollte die Navbar-Dropdown-Liste den Namen der ausgewählten Stadt anstelle von "wählen Sie eine Stadt" zeigen. Die App-Komponente enthält die Navigationsleiste und eine Router-Steckdose, die zu einer Komponente mit den Informationen der Stadt umleiten. Diese Komponente erhält den Namen der Stadt von URL mit ActivatedRoute.

-- app.component.ts -- 
<app-navbar></app-navbar> 
<router-outlet></router-outlet> 

-- navbar.html-- 
<ul class="nav pull-left"> 
     <li class="dropdown pull-right"> 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle"> 
      <span *ngIf="!_selectedCity">Choose a city</span> 
      <span *ngIf="_selectedCity">{{ _selectedCity.name }}</span> 
      <b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
      <li routerLinkActive="active" *ngFor="let city of _cities"><a [routerLink]="['', city.name]" (click)="selectCity(city)">{{ city.name }}</a></li> 
      </ul> 
     </li> 
</ul> 

Um in der Navigationsleiste Dropdown-Liste zu ändern „Wählen Sie eine Stadt“ auf den Namen der gewählten Stadt, füge ich das OnClick-Ereignis und es funktioniert perfekt. Aber wie kann ich den Drop-Down-Wert der Navbar auf den Stadtnamen einstellen, wenn der Benutzer Zugang zu den Stadtinformationen erhält, indem er die URL eingibt, anstatt die Stadt aus dem Dropdown zu wählen?

Danke

Answer 1

Sie abonnieren können Ereignis-Router und die URL param in OnInit der Komponente überprüfen Sie die Dropdown-Wert zu setzen:

import { ActivatedRoute } from '@angular/router'; 
... 
constructor(private activatedRoute: ActivatedRoute) {} 
... 
ngOnInit() { 
    this.activatedRoute.params.subscribe((params: Params) => { 
     console.log(params['cityName']); //or whichever you use 
     }); 
    }