我成功地根据用户访问权限创建了动态菜单,该菜单会在用户登录后显示。我认为我最初的问题没有清晰地表达需求。昨天我在搜索“如何使两个组件相互通信”时,在 Angular 网站上发现了以下内容(请参见下面的链接):
https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html
我们可以通过使用全局 EventEmitter 来实现这一点。以下是我在代码中实现它的方式:
GlobalEventManager:
import { Injectable, EventEmitter } from "@angular/core";
@Injectable()
export class GlobalEventsManager {
public showNavBar: EventEmitter<any> = new EventEmitter();
public hideNavBar: EventEmitter<any> = new EventEmitter();
}
以下链接将帮助您了解如何实现身份验证保护(限制未登录用户进入)。
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 {
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);
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
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 { }
我希望这能帮到你!