Angular 4 dynamic routerlink server/localhost not responding. Works when routerlink is static -
i attempting create dynamic navigation menu based on navigation menu service , navigation menu component.
first prototyped navigation menu make sure worked when component html hardcoded. code looks this:
<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>when run application code , click 1 of links application navigates , selected route specified routerlink attribute loaded router outlet.
i trying modify above code use ngfor generate list based on navigationmenuservice. have tried several different bits of code recent of is:
<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>these appear work in if hover on them link looks correct link, upon clicking them....things break. rather navigating , loading page router outlet "localhost not responding" error.
the navigationmenuservice looks this:
import { injectable } '@angular/core'; import { navigationmenuitem } '../../models/navigationmenuitem'; @injectable() export class navigationmenuservice { public navigationmenustatuses = navigationmenustatus; private navigationmenustatus: navigationmenustatus; constructor() { this.navigationmenustatus = navigationmenustatus.hidden;//start 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 hidden 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 }in case relevant, application uses angular 4.3.6, webpack , hmr @angular/platform-server , @angular/platform-browser modules.
i can make want adding navigatetoitem method on navigationmenuservice , updating html follows:
//created devon holcombe, september 2017 import { injectable } '@angular/core'; import { navigationmenuitem } '../../models/navigationmenuitem'; import { activatedroute, router, params } '@angular/router'; @injectable() export class navigationmenuservice { public navigationmenustatuses = navigationmenustatus; private navigationmenustatus: navigationmenustatus; constructor(private router: router) { this.navigationmenustatus = navigationmenustatus.hidden;//start 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 hidden 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>while works seems there should way using routerlink missing.
Comments
Post a Comment