更新变量时，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';