Angular2 지시어 visiblity

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 표시되지 않습니다. true와 false 사이를 전환하면 작동하므로 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 없습니다.