我有一個帶有以下模板的父組件：
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>
<app-footer></app-footer>
如何根據通過路由器出口的組件路由顯示或隱藏組件app-sidebar？app-footer我有一個showSidebar我想使用的布林值，它的值在每個子組件上設定為 true 或 false。
<app-sidebar *ngIf=showSidebar></app-sidebar>
uj5u.com熱心網友回復：
在應用程式路由中添加一個資料屬性。
{ path: 'no-sidebar', component: NoSidebarComponent, canActivate: [AuthGuard], data: { showSidebar: false } },
并像這樣訂閱父組件中的路由器事件
this.router.events.subscribe(event => {
if (event instanceof RoutesRecognized) {
const routeData = event.state.root.firstChild.data;
if (routeData) {
this.showSidebar = routeData.showSidebar === false ? false : true
}
}
}
uj5u.com熱心網友回復：
您可以使用服務來共享顯示/隱藏標志并將服務注入封閉組件以及路由到的組件中，而不是直接組件到組件通信。
例如子組件的 onInit，在共享服務實體中設定一個標志。包含路由器出口的父組件將讀取該標志并將其與 *ngIf 一起使用以顯示或隱藏模板的某些部分。
uj5u.com熱心網友回復：
您可以使用主題變數，只要您想隱藏或顯示時間發出變數的值并在側邊欄和腳欄中訂閱該變數
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/522014.html