我正在尝试基于导航菜单服务和导航菜单组件创建动态导航菜单。
首先，我对导航菜单进行了原型设计，以确保在组件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>
这些看起来有用，如果你将鼠标悬停在它们上面，链接看起来就像是正确的链接，但点击它们......事情就会中断。而不是成功导航和加载页面到路由器插座我得到一个＆＃34; localhost没有响应＆＃34;错误。
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 modules。
答案 0 :(得分：0)
我可以通过在navigationMenuService上添加navigateToItem方法并按如下方式更新HTML来实现我的目的：
<div id="content">
<h1 id="roomNum">Room 2</h1>
<p id="roomInfo">Once again the door seems to magically close behind you.
<br /> Unlike the stone floor from the previous room, this one is divided up into wooden slabs.<br /> You press your foot onto a slab. It slides down, and an arrrow shoots from the roof.<br /> You barely get out of the way but somehow you dodge it.
You tell yourself to watch your step...</p>
<p id="step"></p>
<p id="step2"></p>
<div class="menu-container" id="puzzle">
<div class="button-container">
<a href="#" class="button" order="7">1</a>
<a href="#" class="button" order="8">2</a>
<a href="#" class="button" order="9">3</a>
<a href="#" class="button" order="6">4</a>
<a href="#" class="button" order="5">5</a>
<a href="#" class="button" order="0">6</a>
<a href="#" class="button" order="3">7</a>
<a href="#" class="button" order="2">8</a>
<a href="#" class="button" order="1">9</a>
</div>
</div>
</div>
<br><br>
<div id="death">
<a href="youtubeGame.html">Try Again?</a>
</div>
<a href="roomThree.html" id="nextRoom">Next Room</a>//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
}
虽然这有效但似乎应该有一种方法可以使用我缺少的routerLink来实现这一点。