更新變量時Angular2 ngstyle不起作用

Question

我想使用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價值，我敢肯定isNavShow觸發值，但沒有更新ngstyle ！
奇怪的是我在開始時設置了hidden，並且第一次從hidden切換到visible的作品。但是，即使isNavShow更改，ngStyle也不會再發生變化。

[更新！]我將導航欄更改爲這種格式，isNavShow確實正確更改。但ngStyle不工作..

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

Answer 1

從路由器的參數只能是字符串，因爲它們來自URL。

試試這個：

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