Angular - 根据路线更改容器高度答案

【问题标题】：Angular - Change the container height based on the routeAngular - 根据路线更改容器高度
【发布时间】：2022-01-03 12:41:48
【问题描述】：

我有一个容器，我根据路线加载我的网格。例如，

admin.component.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，但在 A、B 的情况下保持为 60vh。

每个组件都有自己的HTML、SCSS、TS 文件。有没有办法可以实现这个逻辑？请提出建议。

【问题讨论】：

标签： html css angular

【解决方案1】：

您可以使用ngClass 有条件地添加类并订阅路由器事件以检查 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>

【讨论】：

【解决方案2】：

先决条件：在样式表中创建一个新类，并在边缘情况下使用所需的视图高度。然后，您应该能够执行以下任何操作：

You can use ngClass directive to toggle a class name via a typescript variable.
You can also use [class.largeView]="condition_in_typescript" to add a class largeView to your list of classes. It will only get added when condition is true。
您可以使用 *ngIf 在 ngTemplate 中包装两个布局，并根据 typescript 中的路径变量进行切换。
You can use HostBinding in a directive to bind multiple classes in your element。

【讨论】：