angular - 在导航栏中隐藏按钮

Question

我在 angular 2 中使用 typescript 进行了应用。我在头部创建了一些导航栏和授权页面。

这是我的结构:

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

我的应用程序的第一页是带有导航栏的授权页面。在导航栏中我有 2 个按钮，我的任务是在登录页面隐藏这个按钮，并在下一页显示(当用户在应用程序中授权时)。

我在 navbar.component 和 navbar.template 中创建了这个 var - showButtons: boolean = false > 我添加了这个指令:*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>

但我真的不知道如何在一个组件中绑定(bind)一个值或变量。

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
  }
}