Angular 4 Dynamic Routerlink服务器/localhost不响应.RouterLink是静态的

Question

我正在尝试根据导航菜单服务和导航菜单组件创建动态导航菜单。

首先，我对导航菜单进行了原型制作，以确保在组件HTML进行硬编码时可以正常工作。该代码看起来像这样：

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

当我使用此代码运行应用程序并单击应用程序成功导航的一个链接之一，并按照RouterLink属性指定的所选路由将其加载到路由器出口中。

我正在尝试修改上述代码以使用NGFOR来基于NavigationMenuservice生成列表。我尝试了几个不同的代码，其中的代码是：

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

这些似乎有效，如果您悬停在它们上，链接看起来像正确的链接，但是在单击它们时。而不是成功地导航和加载页面进入路由器插座，而是得到" Localhost没有响应"错误。

NavigationMenuservice看起来像这样：

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
}

如果它相关，则此应用程序使用 @angular/platform-server和 @angular/platform-platform-browser模块使用Angular 4.3.6，WebPack和HMR。

Answer 1

我可以通过在navigationmenuservice上添加navigateToItem方法来完成我想要的事情，并如下更新HTML：

//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>

虽然这项工作似乎应该有一种使用我缺少的RouterLink进行此操作的方法。