Angular2:使用路由，登录成功后如何显示导航栏？
Angular2:使用路由，登录成功后如何显示导航栏？
提问于 2016-04-16 21:58:39
我正在尝试显示导航栏，一旦用户成功这样做了。
例如：
如何更改"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']);
}
}或者这种设计不是解决它的最好方法？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-04-17 00:18:21
我最近做了类似的事情，下面是我是如何做到的。首先，您需要在应用程序的根目录下创建一个NavBarComponent。在NavBarComponent中，您引用(我称之为) GlobalEventsManager，它是您在需要的地方注入的服务。
下面是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>(false);
public showNavBarEmitter: Observable<boolean> = this._showNavBar.asObservable();
constructor() {}
showNavBar(ifShow: boolean) {
this._showNavBar.next(ifShow);
}
}
现在将GlobalEventsManger服务注入到您的登录组件中(如下所示)
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事件发射器：
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“隐藏/显示导航栏。
然后，您的应用程序组件将如下所示：
@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
Stack Overflow用户
发布于 2017-06-29 15:10:32
angular4中最现代的方式，有新的路由器，有子路由，只需要使用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: '' }
]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36665094
复制相关文章
相似问题
腾讯云开发者
