隐藏导航栏中的按钮
问题描述:
我有应用程序在角色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>
但我真的不知道如何一个值或绑定变量的一个组成部分。
答
服务
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
}
}
您的按钮是在导航栏组件WH你想从登录组件中设置真值吗? –
使用服务来设置变量真 –
@Rumes Shyaman在navbar我设置了假估值器,并在登录组件我必须添加相同的变种,但具有真正的价值。 – eduard