隐藏导航栏中的按钮

Question

我有应用程序在角色2与打字稿。我在头部创建了一些导航栏和身份验证页面。

这是我的结构：

• 应用
  • login.comoponent.ts
  • login.template.html
  • navbar.component.ts
  • navbar.template.html

我的应用程序的第一页是带有导航栏的身份验证页面。在导航栏中我有2个按钮，我的任务是在登录页面隐藏这个按钮，并在下一页显示（当用户在应用程序中进行身份验证时）。

我创建此var - showButtons: boolean = false在navbar.component，并在navbar.template我添加此指令：*ngIf="showButtons"。之后，我的按钮会隐藏并正常显示，因为我不会在login.component中创建true值。 这是我login.component：

import { Component } from "@angular/core"; 
import { Router } from "@angular/router"; 
import { Observable } from "rxjs/Rx"; 

import "rxjs/add/observable/of"; 
import "rxjs/add/operator/catch"; 

import { ServerDataComponent } from "../work_with_server/src/server.data.component"; 
import { IUsernamePasswordModelType } from "../work_with_server/src/types.component"; 

@Component({ 
    templateUrl: "./login.template.html", 
}) 
export class LoginComponent { 

    public model: IUsernamePasswordModelType = { password: "", username: "" }; 
    public loading: boolean = false; 
    public error: string = ""; 
    private router: Router; 
    private authenticationService: ServerDataComponent; 

    constructor(router: Router, authenticationService: ServerDataComponent) { 
     this.router = router; 
     this.authenticationService = authenticationService; 
    } 

    public login(): void { 
     this.loading = true; 
     this.authenticationService.isLogin(this.model.username, this.model.password) 
      .catch((err: boolean) => Observable.of(false)) 
      .subscribe((result: boolean) => { 
       if (result === true) { 
        this.router.navigate(["/table_per"]); 
       } else { 
        this.error = "Wrong password or login"; 
        this.loading = false; 
       } 
      }); 
    } 
} 

这是我navbar.template：

<nav class="navbar-fixed-top navbar-inverse "> 
<div class="container-fluid" style="vertical-align: center"> 
<div class="navbar-header"> 
    <b class="navbar-brand">Ласковость</b> 
</div> 
<ul class="nav navbar-nav"> 
    <li> 
    <a style="padding-left: 3px; padding-right: 3px"> 
     <button class="btn btn-default" (click)="backClicked()"> 
     <a class="glyphicon glyphicon-arrow-left"></a> 
     </button> 
    </a> 
    </li> 
    <li> 
    <a style="padding-left: 3px"> 
     <button class="btn btn-default" (click)="reloadPage()"> 
     <a class="glyphicon glyphicon-refresh"></a> 
     </button> 
    </a> 
    </li> 
</ul> 
<ul class="nav navbar-nav navbar-right"> 
    <li> 
    <a><span></span> 
     <logout> 
     </logout> 
    </a> 
    </li> 
</ul> 

但我真的不知道如何一个值或绑定变量的一个组成部分。

Answer 1

服务

import { Injectable } from '@angular/core'; 
import {Subject} from 'rxjs/Subject'; 

@Injectable() 
export class ShowService { 
    // Observable string sources 
    private newShowSource = new Subject<boolean>(); 

    // Observable string streams 
    newShow = this.newShowSource.asObservable(); 

    constructor() { } 
    changeShow(show: boolean) { 
     this.newShowSource.next(show); 
    } 


} 

在NavbarComponent

import {Subscription} from 'rxjs/Subscription'; 
import {ShowService} from './services/show.service'; 

export class NavbarComponent { 
    subscription: Subscription; 
    public loading: boolean = false; 

    constructor(private showService : ShowService){ 
     this.subscription = showService.newShow.subscribe(
      loading => { 
       this.loading = loading; 
      } 
} 
} 

然后在登录组件

import {ShowService} from './services/show.service'; 

export class LoginComponent { 


    constructor(private showService : ShowService){ 

} 
changeLoad(){ 
     this.showService.changeShow(true);// ucan call this and you can chenge the value 
    } 
}