мне удалось создать динамическое меню на основе доступа пользователей сразу после авторизоваться. Я не смог объяснить, когда я спрашивал выше, что я действительно хочу в своем угловом приложении. Вчера я искал на угловом сайте, что, как мы можем сделать 2 компонентов заразных, поэтому я нашел на последующей ссылке:
https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html
Через Globalize событий эмиттеров мы можем возможно сделать это. Я делюсь ниже:
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 {
// 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 { }
Я надеюсь, что это поможет!
@ Downvoter, позаботьтесь, чтобы объяснить нижний предел? –