कोणीय 2: मार्गों का उपयोग, सफलतापूर्वक लॉग इन करने के बाद नेविगेशन बार को कैसे प्रदर्शित करें?

Question

उपयोगकर्ता सफलतापूर्वक करने के बाद, मैं नेविगेशन बार दिखाने की कोशिश कर रहा हूं।

कैसे "AppComponent" में "showMenu" संपत्ति "LoginComponent" अंदर बदलने के लिए:

उदाहरण के लिए

? महत्वपूर्ण: मैं मार्गों का उपयोग कर रहा हूं।

app.ts:

@Component({ 
    selector: 'app', 
    template: `<div *ngIf="showMenu"> 
       <fnd-menu-nav></fnd-menu-nav> 
      </div> 
      <router-outlet></router-outlet> 
       `, 
    directives: [ROUTER_DIRECTIVES, MenuNavComponent] 
}) 
@RouteConfig([ 
    { path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true }, 
    { path: '/welcome', name: 'Welcome', component: WelcomeComponent } 
]) 
export class AppComponent { 
    public showMenu : boolean; 
} 

login.component.ts:

@Component({ 
    selector: 'fnd-login', 
    templateUrl: './fnd/login/components/login.component.html', 
    providers: [LoginService] 
}) 
export class LoginComponent { 
    /* .. other properties */ 

    constructor(private _router: Router, private _loginService: LoginService) { 
    } 
    /* .. other methods */ 
    /* .. other methods */ 


    private onLoginSuccessfully(data : any) : void { 
    /* --> HERE: Set showMenu in AppComponent to true. How? */ 
    this._router.navigate(['Welcome']); 

    } 
} 

या इस डिजाइन इसे हल करने का सबसे अच्छा तरीका नहीं है?

Answer 1

मैंने हाल ही में कुछ ऐसा ही किया और यहां मैंने यह कैसे किया। सबसे पहले, आपको अपने ऐप की रूट पर NavBarComponent बनाने की आवश्यकता है। और NavBarComponent में आप संदर्भित करते हैं (जिसे मैं कॉल करता हूं) ग्लोबल एवेन्ट्स मैनेजर जो एक ऐसी सेवा है जिसे आप इंजेक्ट करते हैं जहां आपको इसकी आवश्यकता होती है। (कुछ इस तरह)

import {GlobalEventsManager} from "./../GlobalEventsManager"; 
 

 
@Component({ 
 
    selector: 'fnd-login', 
 
    templateUrl: './fnd/login/components/login.component.html', 
 
    providers: [LoginService] 
 
}) 
 
export class LoginComponent { 
 
    /* .. other properties */ 
 

 
    constructor(private _router: Router, private _loginService: LoginService, private globalEventsManager: GlobalEventsManager) { 
 
    } 
 
    /* .. other methods */ 
 
    /* .. other methods */ 
 

 

 
    private onLoginSuccessfully(data : any) : void { 
 
    /* --> HERE: you tell the global event manger to show the nav bar */ 
 
    this.globalEventsManger.showNavBar(true); 
 
    this._router.navigate(['Welcome']); 
 

 
    } 
 
}

import { Injectable } from '@angular/core'; 
 
import { BehaviorSubject } from "rxjs/BehaviorSubject"; 
 
import { Observable } from "rxjs/Observable"; 
 

 
@Injectable() 
 
export class GlobalEventsManager { 
 

 
    private _showNavBar: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); 
 
    public showNavBarEmitter: Observable<boolean> = this._showNavBar.asObservable(); 
 

 
    constructor() {} 
 

 
    showNavBar(ifShow: boolean) { 
 
     this._showNavBar.next(ifShow); 
 
    } 
 

 

 
}

अब आप अपनी प्रवेश घटक में GlobalEventsManger सेवा इंजेक्षन:

यहाँ GlobalEventsManager पर एक नज़र है आपके NavBarComponent में आप showNavBar घटना Emitter की सदस्यता:

import {Component, OnInit} from "@angular/core"; 
 
import {GlobalEventsManager} from "../GlobalEventsManager"; 
 
@Component({ 
 
    selector: "navbar", 
 
    templateUrl: "app/main/topNavbar/TopNavbar.html" 
 
}) 
 

 
export class TopNavbarComponent { 
 
    showNavBar: boolean = false; 
 

 

 
    constructor(private globalEventsManager: GlobalEventsManager) { 
 
     this.globalEventsManager.showNavBarEmitter.subscribe((mode)=>{ 
 
      
 
      this.showNavBar = mode; 
 
     }); 
 
     
 
    } 
 

 
    
 
}

उपयोग * ngIf = "showNavBar" टेम्पलेट HTML में छिपा/एनएवी बार दिखाने के लिए।

import { GlobalEventsManager } from './GlobalEventsManager'; 
 
import { TopNavbarComponent } from './TopNavbarComponent'; 
 

 
@NgModule({ 
 
    bootstrap: [App], 
 
    declarations: [ 
 
     App, 
 
     TopNavbarComponent 
 
    ], 
 
    imports: [ 
 
     BrowserModule 
 
    ], 
 
    providers: [GlobalEventsManager] 
 
}) 
 
export class AppModule { 
 
}

:

@Component({ 
 
    selector: 'app', 
 
    template: `<navbar></navbar> 
 
      <router-outlet></router-outlet> 
 
       ` 
 
}) 
 
export class AppComponent { 
 
    //This doesn't belong here --> public showMenu : boolean; 
 
}

इसके अलावा GlobalEventsManager जब आप अनुप्रयोग बूट पंजीकृत होना जरूरी है:

आपका एप्लिकेशन घटक तो कुछ इस तरह दिखता

ऐसा करना चाहिए।

अद्यतन: मैंने इस उत्तर को एक घटक के बाहर की घटनाओं का उपयोग करने के अधिक स्वीकार्य तरीके को प्रतिबिंबित करने के लिए अद्यतन किया है, यानी सेवा में; जो EventEmitter

Answer 2

वास्तव में एक पूरी तरह से अलग दृष्टिकोण है जो किसी भी ईवेंट उत्सर्जक/श्रोताओं का उपयोग नहीं करता है, के बजाय व्यवहार विषय/पर्यवेक्षण का उपयोग करना चाहता है। मेरे पास घटनाओं के खिलाफ कुछ भी नहीं है और मैं विशेष परियोजना आवश्यकताओं/जटिलता के अनुसार दोनों दृष्टिकोण (नीचे एक और @ ब्रैंडो का एक) का उपयोग करता हूं।

विधि: हमारे पास 2 एप्लिकेशन मॉड्यूल (क्षेत्र) हैं: सार्वजनिक (जिसमें कोई navbar नहीं है) और संरक्षित (वह है जिसमें एक है)। यहाँ असामान्य बात नहीं है

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule } from '@angular/router'; 
import { LoginComponent } from './login/login.component'; 
import { RegistrationComponent } from './registration/registration.component'; 
import { ResetPasswordComponent } from './reset-password/reset-password.component'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    RouterModule.forChild([ 
     { path: 'login', component: LoginComponent }, 
     { path: 'registration', component: RegistrationComponent }, 
     { path: 'reset-password', component: ResetPasswordComponent } 
    ]) 
    ], 
    declarations: [ 
    LoginComponent, 
    RegistrationComponent, 
    ResetPasswordComponent 
    ] 
}) 
export class PublicModule { } 

यह वही है आप पहले से ही होना चाहिए,:

लोक मॉड्यूल सभी सार्वजनिक मार्गों में शामिल है।

फिर हम एक संरक्षित क्षेत्र

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule } from '@angular/router'; 
import { NavbarWrapperComponent } from './navbar-wrapper/navbar-wrapper.component'; 
import { UserProfileComponent } from './user-profile/user-profile.component'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    RouterModule.forChild([ 
     { path: '', redirectTo: '/login', pathMatch: 'full' }, // point 1 
     { 
     path: '', // point 2 
     component: NavbarWrapperComponent, // point 3 
     children: [ 
      { path: 'profile', component: UserProfileComponent } 
     ] 
     } 
    ]) 
    ], 
    declarations: [ 
    NavbarWrapperComponent, 
    UserProfileComponent 
    ] 
}) 
export class ProtectedModule { } 

और यहाँ जादू शुरू होता है।

सबसे पहले, बिंदु 1 पर ध्यान देना:

{ path: '', redirectTo: '/login', pathMatch: 'full' }, 

हम इस सही यहाँ की जरूरत है। अगर हम इसे ऐप मॉड्यूल में डाल देते हैं तो इसे अनदेखा कर दिया जाएगा। यहां कुछ भी महत्वपूर्ण नहीं है, यह संरक्षित मॉड्यूल में इस रीडायरेक्ट के लिए और भी तार्किक हो सकता है।

प्वाइंट 2NavbarWrapperComponent (बिंदु 3) में सभी बच्चों मार्गों प्रॉक्सी करने की अनुमति देता है जो हमारे सभी बच्चों के प्रतिपादन का ख्याल रखता है।

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <!-- nav content here --> 
</nav> 

<router-outlet></router-outlet> 

यह <router-outlet> सभी बच्चों मार्गों संभाल लेंगे: यहाँ एक नेवबार घटक के टेम्पलेट है।

संभावित समस्याओं में आप का सामना कर सकते हैं और उनके समाधान:

• आप AppModule को रीडायरेक्ट डाल करने के लिए चाहते हो सकता है - जैसे सिर्फ बिंदु में पथ बदल 2 कुछ वास्तविक नाम protected। यह आपके सभी संरक्षित यूआरएल को इस मान के साथ उपसर्ग करेगा, जिसे आप नहीं चाहते हैं। आपके पास चुनने के लिए 2 विकल्प हैं। बस का उपयोग lazy routing
• आप को छिपाने के लिए/नेविगेशन दिखाने के लिए, मानकों आदि पारित चाहते हो सकता है - - बस घटनाओं समाधान के साथ संयोजित
• आप संरक्षित क्षेत्र के अंदर सिर्फ एक मॉड्यूल की तुलना में अधिक है करने के लिए चाहते हो सकता है।

इस तरह से यह लचीला प्रतीत नहीं होता है, हालांकि यह वास्तव में काम करता है और आपको आवश्यक सभी मामलों को कवर करता है। इसमें घटना जटिलता नहीं है और Router सुविधाओं का पूरी तरह से उपयोग करता है। यहां हत्यारा की बात है - यह गूंगा सरल और समझने और बनाए रखने में बहुत आसान है।

Answer 3

बच्चों के मार्गों के साथ, नए राउटर के साथ कोणीय 4 में सबसे अच्छा आधुनिक तरीका, केवल ब्रांड्स को हटाने के लिए UrlSerializer-class का उपयोग करने की आवश्यकता है, https://angular.io/docs/ts/latest/api/router/index/UrlSerializer-class.html, किसी ने इसका उपयोग किया है?

export const ROUTES: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { 
    path : '', 
    children: [ 
     { 
      path: '', component: DefaultLayoutComponent, 
      children: [ 
      { path: '', component: HomeComponent, canActivate: [AuthGuard] }, 
      { path: 'users', component: UsersListComponent, canActivate: [AuthGuard] }, 
      { path: 'users-add', component: UsersAddComponent, canActivate: [AuthGuard] }, 
      { path: 'users-view/:id', component: UsersViewComponent, canActivate: [AuthGuard] }, 
      { path: 'users-edit/:id', component: UsersEditComponent, canActivate: [AuthGuard] }, 
      ] 
     } 
    ] 
    }, 
    // otherwise redirect to home 
    { path: '**', redirectTo: '' } 
]