我有一個容器，可以根據路線加載我的網格。例如，
管理組件.html
<div class="admin-right-panel">
<div class="grid-style">
<router-outlet></router-outlet>
</div>
</div>
在路由器出口中，我將根據路由加載我的網格頁面/組件這是上述 HTML 的 CSS
admin.component.scss
.admin-right-panel {
height: 60vh;
}
所以，有人問我，當我將特定頁面加載到容器中時，我需要增加這個高度。
假設我有組件 A、B、C，當我加載 B 時，我需要高度為80vh，但保持與60vhA、B 的情況一樣。
每個組件都有自己的HTML, SCSS,TS檔案。有沒有辦法實作這個邏輯？請建議。
uj5u.com熱心網友回復：
您可以使用ngClass和訂閱 Router 事件有條件地添加類以檢查 URL 的路徑。
import {Router, NavigationEnd, ActivatedRoute} from '@angular/core';
...
path!: string;
constructor(private router: Router, private route: ActivatedRoute) {
this.router.events.pipe(filter((event) => event instanceOf NavigationEnd).subscribe((data) => {
this.path = this.route.snapshot.path;
})
}
使用路徑，設定組件的類。
<div [ngClass]="{ 'extraHeight': path === '<YourPath>' }"> ... </div>
uj5u.com熱心網友回復：
先決條件：在樣式表中創建一個新類，在邊緣情況下具有所需的視圖高度。然后，您應該能夠執行以下任何操作：
- 您可以使用 ngClass 指令通過打字稿變數切換類名。
- 您還可以使用 [class.largeView]="condition_in_typescript" 將類 largeView 添加到您的類串列中。它只會在條件為 true 時添加。
- 您可以使用 *ngIf 將 ngTemplate 中的兩個布局包裝起來，并根據打字稿中的路徑變數進行切換。
- 您可以在指令中使用 HostBinding 來系結元素中的多個類。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/365489.html