Question

我有使用observable和rxjs主题来显示或隐藏我的标题栏的问题。

我有一个标题栏，我想根据被调用的屏幕显示/隐藏。

例如：

当我在登录屏幕上时，我的标题栏将不会显示！但是，当我进入系统时，它将显示我的标题栏。

我使用以下代码：

headerbar.component.ts：

import { Component } from '@angular/core';
import { GlobalService } from '../global.service';


@Component({
    moduleId: module.id,
    selector: 'fnd-headerbar',
    templateUrl: 'headerbar.component.html',
    providers:[GlobalService]
})
export class HeaderbarComponent { 
    private showHeaderbar : boolean = true;

    constructor(private globalService : GlobalService) {
        this.globalService.headerbarApi.showHeaderbar$.subscribe((show) => {
            this.showHeaderbar = show;
        });
    }
}

headerbar.component.html

<nav class="navbar navbar-default navbar-xs fnd-nav-bar fnd-nav-bar-primary" *ngIf="showHeaderbar" >
    <div class="fnd-div-menu">
        <div style="display: table-row">    
...

headerbar.api.ts

import { Observable } from 'rxjs/Rx';
import { Subject }    from 'rxjs/Subject';

export class HeaderbarApi {
    public showHeaderbar$ : Observable<boolean>;

    public showHeaderbarSource = new Subject<boolean>();
    constructor() {
        this.showHeaderbar$ = this.showHeaderbarSource.asObservable(); 
    }
    public showHeaderbar(show : boolean) {
        this.showHeaderbarSource.next(show);
    }
}

global.service.ts

import { HeaderbarApi } from './headerbar/headerbar.api';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class GlobalService {

    public headerbarApi : HeaderbarApi = new HeaderbarApi();

    constructor() {}

}

login.component.ts

import { Component } from '@angular/core';
import { GlobalService } from '../../+foundation/global.service';

@Component({
    moduleId: module.id,
    selector: 'fnd-login',
    templateUrl: 'login.component.html',
    providers: [GlobalService]
})
export class LoginComponent implements OnInit {

    constructor(private globalService : GlobalService) {
    }
    public ngOnInit() : void {
        this.globalService.headerbarApi.showHeaderbar(false);
    }
}

Observable和Subject不显示/隐藏我的组件Angular 2

0 个答案: