Скрыть кнопки в навигаторе

Question

У меня есть приложение в угловом 2 с машинописным текстом. Я создаю несколько навигационных и auth-страниц в голове.

Это моя структура:

• приложение
  • login.comoponent.ts
  • login.template.html
  • navbar.component.ts
  • navbar.template.html

Первая страница моего приложения - это страница auth с навигационной панелью. И в navbar у меня есть две кнопки, моя задача - скрыть эту кнопку на странице входа и показать на следующей странице (когда пользователь авторизуется в приложении).

Я создаю этот var - showButtons: boolean = false в navbar.component, и в navbar.template я добавить эту директиву: *ngIf="showButtons". И после этого мои кнопки скрываются, и это нормально, потому что я не создаю значение true в login.component. Это мой 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 
    } 
}