मैं उपयोगकर्ता पहुँच सही होने के बाद के आधार पर गतिशील बनाएं मेनू में कामयाब लॉग इन करें। मैं समझाने में असफल रहा, जबकि मैं ऊपर से पूछ रहा था कि मैं वास्तव में अपने कोणीय 2 ऐप में क्या चाहता हूं। कल मैं कोणीय वेबसाइट पर खोज रहा था कि कैसे हम 2 घटक संचारी कर सकते हैं, तो मैं लिंक का पालन पर पाया था:
https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html
globalize घटनाओं के माध्यम से emitter हम संभव कर सकते हैं। मैं नीचे साझा कर रहा हूँ:
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:
export class Features {
Description: string;
RoutePath: string;
}
menu.component.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
विशेषताएं में इस्तेमाल
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 { }
मुझे आशा है कि यह मदद मिलेगी!
@ डाउनवॉटर, डाउनवोट की व्याख्या करने की देखभाल? –