根据 URL 动态更改 DIV 的 css - Angular答案

【问题标题】：dynamically change css of a DIV based on URL - Angular根据 URL 动态更改 DIV 的 css - Angular
【发布时间】：2019-03-25 05:13:57
【问题描述】：

我有一个问题，我想根据我所在的 RouterModule 更改第一个 DIV（背景、宽度、高度...）的 CSS，并且此 DIV 位于主 app.component.html 中

<div class="bg">
<div class="container-fluid">
<div class="row">
<div class="col-xl-2 col-lg-1 col-md-1 col-sm-1" id="logo">
  <a routerLink=""><b>Logo</b></a>
</div>
<div id="navigation" class="col-xl-8 col-lg-10 col-md-10 col-sm-10">
  <ul>
    <li><a routerLink="/zivljenjepis">O MENI</a></li>
    <li><a routerLink="/jeziki">JEZIKI</a></li>
    <li><a routerLink="/projekti">PROJEKTI</a></li>
    <li><a routerLink="/kontakt">KONTAKT</a></li>
  </ul>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>

你有什么建议吗？谢谢

【问题讨论】：

将代码作为文本包含在问题中，而不是作为图像。
给它一个选择器，例如：<div #mainDiv>，通过@ViewChild 访问它，然后，OnInit（或者更好的是OnChange），获取项目并相应地替换 CSS .旁注：请将代码包含为文本，而不是图像，谢谢。

标签： javascript html css angular frontend

【解决方案1】：

[routerLinkActive] 允许您在链接的路由变为活动状态时向元素添加 CSS 类。

HTML：

<a routerLink="/user/bob" routerLinkActive="class1">Bob</a>

CSS：

.class1 { background-color: red }

https://angular.io/api/router/RouterLinkActive

【讨论】：

这不能回答 OP 问题...这将在链接元素上添加一个类，其中 routerLink 被应用而不是 DOM 中某处所要求的不同元素，并通过代码清楚地证明了这一点例子。

【解决方案2】：

您可以订阅router.events 以了解导航何时发生。然后在 NavigationEnd 上检索当前路由路径值并将其作为 CSS 类应用到所需的 HTML 元素上，ngClass。

这意味着例如导航到home 页面将在您应用ngClass 的元素上添加home 类。然后，您可以设置 CSS 类以根据需要设置元素的样式。

此处提供 StackBlitz 示例：https://stackblitz.com/edit/angular-stackoverflow-52907143

app.component.html

<div class="bg" [ngClass]="bgClass">
  <div id="logo">
    <a routerLink=""><b>Logo</b></a>
  </div>
  <div id="navigation">
    <ul>
      <li><a routerLink="/home">Home</a></li>
      <li><a routerLink="/products">Products</a></li>
      <li><a routerLink="/about">About</a></li>
    </ul>
  </div>
</div>
<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  bgClass = 'default';

  constructor(
    private router: Router,
  ) {
    // subscribe to router navigation
    this.router.events.subscribe(event => {
      // filter `NavigationEnd` events
      if (event instanceof NavigationEnd) {
        // get current route without leading slash `/`
        const eventUrl = /(?<=\/).+/.exec(event.urlAfterRedirects);
        const currentRoute = (eventUrl || []).join('');
        // set bgClass property with the value of the current route
        this.bgClass = currentRoute;
      }
    });
  }
}

app.component.css

.default {
  background: lightgray;
}

.about {
  background: lightpink;
}

.home {
  background: powderblue;
}

.products {
  background: lightgreen;
}

【讨论】：