Angular 4 dynamic routerlink Server/localhost reagiert nicht. Funktioniert, wenn der Routerlink statisch ist

Question

Ich versuche ein dynamisches Navigationsmenü zu erstellen, das auf einem Navigationsmenü und einer Navigationsmenükomponente basiert.

Zuerst habe ich das Navigationsmenü getestet, um sicherzustellen, dass es funktionierte, wenn das HTML der Komponente fest codiert war. Dieser Code sieht wie folgt aus:

<nav> 
 
    <md-list> 
 
    <md-list-item routerLinkActive="link-active"> 
 
     <a [routerLink]="['/users']"> 
 
     <md-icon>people</md-icon><span *ngIf="navigationMenuService.getStatus() == navigationMenuService.navigationMenuStatuses.IconsAndLabels">Users</span> 
 
     </a> 
 
    </md-list-item> 
 
    <md-list-item routerLinkActive="link-active"> 
 
     <a [routerLink]="['/patients']"> 
 
     <md-icon>hotel</md-icon><span *ngIf="navigationMenuService.getStatus() == navigationMenuService.navigationMenuStatuses.IconsAndLabels">Patients</span> 
 
     </a> 
 
    </md-list-item> 
 
    <md-list-item routerLinkActive="link-active"> 
 
     <a [routerLink]="['/studies']"> 
 
     <md-icon>library_books</md-icon><span *ngIf="navigationMenuService.getStatus() == navigationMenuService.navigationMenuStatuses.IconsAndLabels">Studies Dashboard</span> 
 
     </a> 
 
    </md-list-item> 
 
    <md-list-item routerLinkActive="link-active"> 
 
     <a [routerLink]="['/exampleselect']"> 
 
     <md-icon>library_books</md-icon><span *ngIf="navigationMenuService.getStatus() == navigationMenuService.navigationMenuStatuses.IconsAndLabels">Example Select list</span> 
 
     </a> 
 
    </md-list-item> 
 
    </md-list> 
 
</nav>

Wenn ich die Anwendung mit diesem Code ausführen und klicken Sie auf einen der Links erfolgreich die Anwendung navigiert und die gewählte Route, wie durch die Router Attribut angegeben wird geladen der Router-Ausgang.

Ich versuche, den obigen Code zu ändern, um ngFor zu verwenden, um die Liste basierend auf dem navigationMenuService zu generieren. Ich habe versucht, verschiedene Teile des Codes des jüngsten davon ist:

<nav> 
 
    <md-list> 
 
    <md-list-item routerLinkActive="link-active" *ngFor="let menuItem of navigationMenuService.getNavigationMenuItems()"> 
 
     <a [routerLink]="['/'+menuItem.route]"> 
 
     <md-icon>{{menuItem.iconName}}</md-icon><span *ngIf="navigationMenuService.getStatus() == navigationMenuService.navigationMenuStatuses.IconsAndLabels">{{menuItem.label}}</span> 
 
     </a> 
 
    </md-list-item> 
 

 
    </md-list> 
 
</nav>

Dies scheinen in arbeiten, wenn man über sie schwebt der Link sieht aus wie der richtige Link, aber beim Klicken sie .... Dinge brechen. Anstatt erfolgreich zu navigieren und die Seite in den Router-Ausgang zu laden, erhalte ich den Fehler "localhost reagiert nicht".

Die navigationMenuService sieht wie folgt aus:

import { Injectable } from '@angular/core'; 
 
import { NavigationMenuItem } from '../../models/NavigationMenuItem'; 
 

 
@Injectable() 
 
export class NavigationMenuService { 
 
    public navigationMenuStatuses = NavigationMenuStatus; 
 
    private navigationMenuStatus: NavigationMenuStatus; 
 

 
    constructor() { 
 
     this.navigationMenuStatus = NavigationMenuStatus.Hidden;//start with the navigation menu closed. 
 
    } 
 

 
    getNavigationMenuItems(): NavigationMenuItem[] { 
 
     return [ 
 
     { 
 
      iconName: "library_books", 
 
      label: "Studies", 
 
      route: "studies" 
 
     }, 
 
     { 
 
      iconName: "library_books", 
 
      label: "Example Select", 
 
      route: "exampleselect" 
 
     }]; 
 
    } 
 

 
    getStatus(): NavigationMenuStatus { 
 
     return this.navigationMenuStatus; 
 
    } 
 

 
    setStatus(status: NavigationMenuStatus) { 
 
     this.navigationMenuStatus = status; 
 
    } 
 

 
    //toggles visibility of labels. If status is currently hidden this method has no effect. 
 
    toggleLabels() { 
 
     if (this.navigationMenuStatus == NavigationMenuStatus.Icons) { 
 
      this.navigationMenuStatus = NavigationMenuStatus.IconsAndLabels; 
 
     } 
 
     else if (this.navigationMenuStatus == NavigationMenuStatus.IconsAndLabels) { 
 
      this.navigationMenuStatus = NavigationMenuStatus.Icons; 
 
     } 
 
    } 
 
} 
 

 
export enum NavigationMenuStatus { 
 
    Hidden, 
 
    Icons, 
 
    IconsAndLabels 
 
}

Falls es relevant ist, diese Anwendung Angular 4.3.6 verwendet, Webpack und HMR mit @ Winkel/Plattform-Server und @angular/Plattform-Browser-Module.

Answer 1

kann ich das tun, was ich will, indem ein navigateToItem Methode auf dem navigationMenuService Hinzufügen und Aktualisieren der HTML wie folgt:

//Created by Devon Holcombe, September 2017 
 
import { Injectable } from '@angular/core'; 
 
import { NavigationMenuItem } from '../../models/NavigationMenuItem'; 
 
import { ActivatedRoute, Router, Params } from '@angular/router'; 
 

 
@Injectable() 
 
export class NavigationMenuService { 
 
    public navigationMenuStatuses = NavigationMenuStatus; 
 
    private navigationMenuStatus: NavigationMenuStatus; 
 

 
    constructor(private router: Router) { 
 
     this.navigationMenuStatus = NavigationMenuStatus.Hidden;//start with the navigation menu closed. 
 
    } 
 

 
    getNavigationMenuItems(): NavigationMenuItem[] { 
 
     return [ 
 
     { 
 
      iconName: "library_books", 
 
      label: "Studies", 
 
      route: "/studies" 
 
     }, 
 
     { 
 
      iconName: "library_books", 
 
      label: "Example Select", 
 
      route: "/exampleselect" 
 
     }]; 
 
    } 
 

 
    navigateToItem(menuItem: NavigationMenuItem) { 
 
     this.router.navigateByUrl(menuItem.route); 
 
    } 
 

 
    getStatus(): NavigationMenuStatus { 
 
     return this.navigationMenuStatus; 
 
    } 
 

 
    setStatus(status: NavigationMenuStatus) { 
 
     this.navigationMenuStatus = status; 
 
    } 
 

 
    //toggles visibility of labels. If status is currently hidden this method has no effect. 
 
    toggleLabels() { 
 
     if (this.navigationMenuStatus == NavigationMenuStatus.Icons) { 
 
      this.navigationMenuStatus = NavigationMenuStatus.IconsAndLabels; 
 
     } 
 
     else if (this.navigationMenuStatus == NavigationMenuStatus.IconsAndLabels) { 
 
      this.navigationMenuStatus = NavigationMenuStatus.Icons; 
 
     } 
 
    } 
 
} 
 

 
export enum NavigationMenuStatus { 
 
    Hidden, 
 
    Icons, 
 
    IconsAndLabels 
 
}

<nav> 
 
    <md-list> 
 
    <md-list-item routerLinkActive="link-active" *ngFor="let menuItem of navigationMenuService.getNavigationMenuItems()"> 
 
     <a (click)="navigationMenuService.navigateToItem(menuItem)"> 
 
     <md-icon>{{menuItem.iconName}}</md-icon><span *ngIf="navigationMenuService.getStatus() == navigationMenuService.navigationMenuStatuses.IconsAndLabels">{{menuItem.label}}</span> 
 
     </a> 
 
    </md-list-item> 
 

 
    </md-list> 
 
</nav>

Während dies funktioniert es wie es scheint eine sein sollte, Möglichkeit, dies zu tun mit routerLink, dass ich vermisse.