首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular2:使用路由,登录成功后如何显示导航栏?

Angular2:使用路由,登录成功后如何显示导航栏?
EN

Stack Overflow用户
提问于 2016-04-16 21:58:39
回答 2查看 29.9K关注 0票数 22

我正在尝试显示导航栏,一旦用户成功这样做了。

例如:

如何更改"LoginComponent“内"AppComponent”中的"showMenu“属性?重要提示:我正在使用路由。

app.ts:

代码语言:javascript
复制
@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:

代码语言:javascript
复制
@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']);

  }
}

或者这种设计不是解决它的最好方法?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-04-17 00:18:21

我最近做了类似的事情,下面是我是如何做到的。首先,您需要在应用程序的根目录下创建一个NavBarComponent。在NavBarComponent中,您引用(我称之为) GlobalEventsManager,它是您在需要的地方注入的服务。

下面是GlobalEventsManager的介绍:

代码语言:javascript
复制
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服务注入到您的登录组件中(如下所示)

代码语言:javascript
复制
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']);

  }
}

在您的NavBarComponent中,您可以订阅showNavBar事件发射器:

代码语言:javascript
复制
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;
        });
        
    }

 
}

使用模板HTML中的*ngIf="showNavBar“隐藏/显示导航栏。

然后,您的应用程序组件将如下所示:

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

此外,在启动应用程序时还必须注册GlobalEventsManager:

代码语言:javascript
复制
import { GlobalEventsManager } from './GlobalEventsManager';
import { TopNavbarComponent } from './TopNavbarComponent';

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

这应该就行了。

更新:我已经更新了这个答案,以反映在组件之外使用事件的更被接受的方式,即在服务中;这需要使用BehaviorSubject/Observable而不是EventEmitter

票数 36
EN

Stack Overflow用户

发布于 2017-06-29 15:10:32

angular4中最现代的方式,有新的路由器,有子路由,只需要使用UrlSerializer-class去掉括号,https://angular.io/docs/ts/latest/api/router/index/UrlSerializer-class.html,有人用过吗?

代码语言:javascript
复制
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: '' }
]
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36665094

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档