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>
それは動作します:
はこれを試してみてください!どうもありがとう。 –