一旦用户成功完成,我试图显示导航栏.
例如:
如何更改“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']); } }
或者这种设计不是最好的解决办法吗?
我最近做了类似的事情,这里是我做的.首先,您需要在应用程序的根目录创建一个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>(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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。