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 работает. Тем не менее, ngStyle больше не изменился, даже isNavShow изменилось.

[обновить!] Я изменяю навигационную панель на этот формат, isNavShow действительно изменить правильно. Но ngStyle не работает..

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

Answer 1

Параметры от маршрутизатора могут быть только строками, потому что они приходят из URL.

Попробуй это:

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