Angular 4 动态路由器链接服务器/本地主机没有响应。当 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>

这些似乎有效，如果您将鼠标悬停在它们上方，则链接看起来像是正确的链接，但单击它们时......事情会中断。我没有成功导航并将页面加载到路由器插座中，而是收到“本地主机没有响应”错误。

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 4.3.6、Webpack 和 HMR 以及 @angular/platform-server 和 @angular/platform-b​​rowser 模块。

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 来做到这一点。