2016-10-02 11 views
0

コントローラコンポーネントの子コンポーネントであるナビゲーションバーの表示/非表示にngstyleを使用したいとします。変数の更新時にangular2 ngstyleが機能しない

コントローラーのHTML

<section> 
    <app-nav class="nav" [ngStyle]="{'visibility':isNavShow?'visible':'hidden'}"></app-nav> 
    <app-main class="main"></app-main> 
</section> 

コントローラコンプ

isNavShow:boolean = false; 
subRouterParam:Subscription = new Subscription(); 

constructor(private accountService: AccountService,private route: ActivatedRoute) {} 

ngOnInit() { 
    console.log('account id:'+this.accountService.userData.id); 
    this.subRouterParam = this.route.params.subscribe(
     (data)=> { 
      this.isNavShow = data['isNavShow']==undefined?false:data['isNavShow']; 
     } 
    ); 
} 

ngDoCheck(){ 
    console.log(this.isNavShow); 
} 

ngOnDestroy(){ 
    this.subRouterParam.unsubscribe(); 
} 

コントローラモジュール

@NgModule({ 
    declarations: [ 
     ConsoleComponent, 
     NavComponent 
    ], 
    imports: [ 
     MainModule, 
     CommonModule 
    ], 
    providers:[TagService] 
}) 
export class ConsoleModule{} 

私はisNavShowトグル値はかなり確信しているが、ngstyleが更新されていない、isNavShow値を記録しています!
奇妙なことは、開始時にhiddenを設定し、初めてhiddenからvisibleに切り替えることです。しかし、ngStyleはisNavShowが変更されてももう変化しませんでした。

[更新!]ナビゲーションバーをこの形式に変更すると、isNavShowが実際に正しく変更されます。しかしngStyleが動作していない、彼らはURLから来るので...ルータから

<div class="nav" [ngStyle]="{'visibility':isNavShow?'visible':'hidden'}">{{isNavShow}}</div> 

答えて

2

のparamsは、文字列だけすることができます。

this.isNavShow = data['isNavShow'] && data['isNavShow'].toLowerCase() === 'true'; 
+0

それは動作します:

はこれを試してみてください!どうもありがとう。 –

関連する問題