首页 文章

Angular 4动态routerlink服务器/ localhost无响应 . 当routerlink是静态时工作

提问于
浏览 次
0

我正在尝试基于导航菜单服务和导航菜单组件创建动态导航菜单 .

首先，我对导航菜单进行了原型设计，以确保在组件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 4.3.6，Webpack和HMR与@ angular / platform-server和@ angular / platform-browser模块 .

angular angular-router

1 回答

  • 0

    我可以通过在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这样做 .

    回复于

相关问题