javascript - Angular2: Rendera samma komponent med olika id:n


Jag har en vanlig toppmeny med några få knappar på. Knapparna navigerar till samma komponent dashboard med olika parametrar. Jag vill läsa den parametern och göra ändringar på dashboarden.
På dashboarden uppdaterar jag bara käll-URL:en för iframe baserat på parametern som skickas från toppmenyknapparna.
När dashboard-komponenten laddas första gången, blir inte constructor(), ngOnInit eller ngOnChanges kallade när knapparna klickas från toppmenyn. Här är koden:
app.component.html

    <button md-button  [routerLink]="['/dashboard', 'first']"  id="first" class="top-link">First</button>
    <button md-button  [routerLink]="['/dashboard', 'second']" id="second" class="top-link">second</button>
    <button md-button  [routerLink]="['/dashboard', 'third']" id="third" class="top-link">third</button>

dashboard.component.ts

constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer) {
    this.dashboardId = route.snapshot.params['id'];
    console.log("Constructor "+route.snapshot.params['id']);
    this.dashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.first_url);
  }

  ngOnInit() {
    console.log("OnInit "+this.route.snapshot.params['id']);
    //this.dashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.first_url);
  }

Hur kan jag skicka knapp-ID från toppbaren till dashboard-komponenten och uppdatera sidan?

Svar #1

Detta är ett normalt beteende. Du kan prenumerera på ruttändringar och uppdatera komponenten därefter:

ngOnInit(): void {
    this.changeMeOnUpdate();
}

changeMeOnUpdate(){
    this.sub = this.activatedRoute
        .params
        .subscribe(params => {
            //do what you want with your params and update the component
        }
}