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には以下の設定があります。これは動作し、navbarは表示されません。真と偽の間でトグルすれば、それは働くので、私はapp.componentからそれが動作することを知っています。

isLoggedIn=false; 

私のログインページで私は可視性を設定しましたが、動作しません。

navbarコンポーネントに「私はログインしているのであなたの可視性を今変更する必要があります。私はあなたをプロバイダとして追加しました」と話すにはどうすればいいですか？以下、私は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.htmlである私の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']); 
    } 




} 

ある

<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ありません。