大佬教程收集整理的这篇文章主要介绍了Angular2:使用路由,成功登录后如何显示导航栏?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
例如:
如何更改“LoginComponent”中“AppComponent”中的“showMenu”属性?重要提示:我正在使用路线.
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']); } }
或者这种设计不是最好的解决办法吗?
下面来看看GlobalEventsManager:
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>(null); public showNavBarEmitter: Observable<boolean> = this._showNavBar.asObservable(); constructor() {} showNavBar(ifShow: boolean) { this._showNavBar.next(ifShow); } }
现在您将GlobalEventsmanger服务注入到您的登录组件(这样)
import {GlobalEventsManager} from "./../GlobalEventsManager"; @Component({ selector: 'fnd-login',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']); } }
在您的NavBarComponent中,您订阅了showNavBar事件发射器:
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)=>{ // mode will be null the first time it is created,so you need to igonore it when null if (mode !== null) { this.showNavBar = mode; } }); } }
在模板HTML中使用* ngIf =“showNavBar”来隐藏/显示导航栏.
您的应用程序组件看起来像这样:
@Component({ selector: 'app',template: `<navbar></navbar> <router-outlet></router-outlet> ` }) export class AppComponent { //This doesn't belong here --> public showMenu : boolean; }
当您启动应用程序时,GlobalEventsManager也必须注册:
import { GlobalEventsManager } from './GlobalEventsManager'; import { TopNavbarComponent } from './TopNavbarComponent'; @NgModule({ bootstrap: [App],declarations: [ App,TopNavbarComponent ],imports: [ BrowserModule ],providers: [GlobalEventsManager] }) export class AppModule { }
应该这样做
更新:我已经更新了这个答案,以反映在组件之外使用事件的更接受的方式,即服务;这需要使用BehaviorSubject / Observable而不是EventEmitter
以上是大佬教程为你收集整理的Angular2:使用路由,成功登录后如何显示导航栏?全部内容,希望文章能够帮你解决Angular2:使用路由,成功登录后如何显示导航栏?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。