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

更新变量时 Angular2 ngstyle 不起作用

Angular2 ngstyle is not working when update variable

angular2-directives

angular