我设法在用户登录后立即根据用户访问权限创建动态菜单。我认为我无法在我原来的问题中正确表达要求。昨天，在搜索“如何使 2 个组件相互通信”时，我在 Angular 网站上找到了这个（见下面的链接）：
https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html
我们可以通过使用 Global EventEmitter 来实现这一点。以下是我在代码中实现它的方式：
全球事件管理器：
import { Injectable, EventEmitter } from "@angular/core";
@Injectable()
export class GlobalEventsManager {
public showNavBar: EventEmitter<any> = new EventEmitter();
public hideNavBar: EventEmitter<any> = new EventEmitter();
}
以下链接将帮助您了解如何实现 auth guard（限制用户在未登录的情况下进入）。
http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial
Auth.Guard.ts：
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { GlobalEventsManager } from "../_common/gobal-events-manager";
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router, private globalEventsManager: GlobalEventsManager) { }
canActivate() {
if (localStorage.getItem('currentUser')) {
this.globalEventsManager.showNavBar.emit(true);
return true;
}
else {
// not logged in so redirect to login page
this.router.navigate(['/login']);
this.globalEventsManager.hideNavBar.emit(true);
return;
}
}
}
menu.component.ts 中使用的模型
特点：
export class Features {
Description: string;
RoutePath: string;
}
menu.component.ts：
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Features } from '../_models/features';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { GlobalEventsManager } from "../_common/gobal-events-manager";
@Component({
selector: 'nav',
templateUrl: './menu.component.html'
})
export class MenuComponent {
showNavBar: boolean = false;
featureList: Features[] = [];
private headers = new Headers({ 'Content-Type': 'application/json' });
constructor(private http: Http, private router: Router, private globalEventsManager: GlobalEventsManager) {
this.globalEventsManager.showNavBar.subscribe((mode: any) => {
this.showNavBar = mode;
if (this.showNavBar = true) {
<!-- the below function expects user id, here I have given as 1 -->
this.getFeatureListByLoggedInUser(1)
.then(list => { this.featureList = list; });
}
});
this.globalEventsManager.hideNavBar.subscribe((mode: any) => {
this.showNavBar = false;
this.featureList = [];
});
}
private getFeatureListByLoggedInUser(userID: number): Promise<Features[]> {
return this.http.get(your api url + '/Feature/GetFeatureListByUserID?userID=' + userID)
.toPromise()
.then(response => response.json() as Features[])
.catch(this.handleError);
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
}
Menu.Component.html：
<div id="navbar" *ngIf="showNavBar" class="navbar-collapse collapse navbar-collapse-custom">
<ul class="nav navbar-nav nav_menu full-width">
<li *ngFor="let feature of featureList" class="nav_menu" routerLinkActive="active"><a class="nav-item nav-link" [routerLink]="[feature.routepath]" routerLinkActive="active">{{feature.description}}</a></li>
</ul>
</div>
App.Component.ts：
<!-- menu container -->
<nav>
</nav>
<!-- main app container -->
<div class="container-fluid body-content-custom">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding">
<router-outlet></router-outlet>
</div>
</div>
<footer class="footer">
</footer>
In the last, we need to register the providers of menu and global event manager in app.module.ts
app.module.ts
/// <reference path="reset-password/reset-password.component.ts" />
/// <reference path="reset-password/reset-password.component.ts" />
import './rxjs-extensions';
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule, XHRBackend } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './_guards/auth.guard';
import { ContentHeaders } from './_common/headers';
import { GlobalEventsManager } from "./_common/gobal-events-manager";
import { MenuComponent } from "./menu/menu.component";
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule,
ReactiveFormsModule
],
declarations: [
AppComponent,
MenuComponent
],
providers: [
AuthGuard,
ContentHeaders,
GlobalEventsManager
],
bootstrap: [AppComponent]
})
export class AppModule { }
我希望这会有所帮助！