Angular2指令可見性

Question

我非常沮喪，我無法發送Angular2中可重用指令的可見性。

1）我有一個登錄頁面

我想送我的導航欄的可見性。當我在登錄頁面上，然後不可見，然後當我登錄然後可見。

@Component({ 
    selector: 'my-app', 
    template: ` 
       <navbar [visible]="isLoggedIn"></navbar> 
       <div class="container"> 
        <router-outlet></router-outlet> 
       </div>`, 
    directives: [NavbarComponent,ROUTER_DIRECTIVES] 
}) 

在我的app.component.ts我有下面的設置;這工作，導航欄不可見。如果在true和false之間切換，它可以工作，所以我知道從app.component起作用。

isLoggedIn=false; 

在我的登錄頁面中，我設置了可見性但它不起作用。

如何與導航欄組件通話以說「由於我已登錄，我現在需要更改您的可見性。我將您添加爲提供程序」。下面我設置this.isLoggedIn = true;登錄時仍然隱藏。

import { Component } from '@angular/core'; 
import { Router, ROUTER_DIRECTIVES } from '@angular/router'; 
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from '@angular/common'; 
import { Http, Headers } from '@angular/http'; 
import { contentHeaders } from '../common/headers'; 
import {NavbarComponent} from '../navbar/navbar.component'; 

@Component({ 
    selector: 'login', 
    directives: [ NavbarComponent,ROUTER_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES ], 
    templateUrl: 'app/login/login.component.html', 
    styles: [ 'app/login/login.component.css' ] 
}) 
export class LoginComponent { 
    constructor(public router: Router, public http: Http) { 
    } 


    //visibility: hidden; 

    public isLoggedIn: boolean = false; 


    login(event: any, username: string, password: string) { 
    event.preventDefault(); 
    let body = JSON.stringify({ username, password }); 
    this.http.post('http://127.0.0.1:8050/auth', body, { headers: contentHeaders }) 
     .subscribe(
     response => { 
      localStorage.setItem('id_token', response.json().access_token); 
      console.log(response.json().access_token); 
      console.log(this.isLoggedIn); 
      this.isLoggedIn = true; 
      console.log(this.isLoggedIn); 
      this.router.navigate(['/home']); 
     }, 
     error => { 
      alert(error.text()); 
      console.log(error.text()); 
     } 
    ); 
    } 

    signup(event: any) { 
    event.preventDefault(); 
    this.router.navigate(['/signup']); 
    } 
} 

這裏是我的navbar.compoment.ts

import {Component, Input} from '@angular/core'; 
import { Http, Headers } from '@angular/http'; 
import { AuthHttp } from 'angular2-jwt'; 
import { CORE_DIRECTIVES,Location } from '@angular/common'; 
import {ROUTER_DIRECTIVES, Router,ActivatedRoute} from '@angular/router'; 

@Component({ 
    selector: 'navbar', 
    templateUrl: 'app/navbar/navbar.component.html', 
    directives: [ROUTER_DIRECTIVES] 

}) 
export class NavbarComponent { 


    @Input() visible = true; 

    //constructor(private _router: Router){} 

    jwt: string; 
    decodedJwt: string; 
    response: string; 
    api: string; 
    //jwt_decode:any; 
    constructor(private _loc:Location,private route: ActivatedRoute, 
       public router: Router, public http: Http, public authHttp: AuthHttp) { 
     this.jwt = localStorage.getItem('id_token'); 
     //this.decodedJwt = this.jwt && window.jwt_decode (this.jwt); 
    } 


    logout() { 
     localStorage.removeItem('id_token'); 
     this.router.navigate(['/login']); 
    } 




} 

這裏是我的navbar.html

<div *ngIf="visible"> 
    <div class="dashhead"> 
    <div class="dashhead-titles"> 
     <h6 class="dashhead-subtitle">Bootops</h6> 
     <h3 class="dashhead-title">Role Builder</h3> 
    </div> 

    <div class="dashhead-toolbar"> 
     <span class="dashhead-toolbar-divider hidden-xs"></span> 
    </div> 
    </div> 

    <ul class="nav nav-bordered"> 
    <li [class.active]="isCurrentRoute(['Environments'])"><a 
    <li><a (click)="logout()">Logout</a></li> 

    </ul> 
</div> 

Answer 1

嘗試：

<navbar [hidden]="!isLoggedIn"></navbar> 

沒有visiblehtml attribute。 「