[英]dynamically change css of a DIV based on URL - Angular
I have a problem, I want to change CSS of the first DIV(background,width,height...) based on which RouterModule I'm on and this DIV is located in the main app.component.html 我有一个问题,我想根据我所在的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>
Do you have any suggestions? 你有什么建议吗? Thank you 谢谢
[routerLinkActive]
Lets you add a CSS class to an element when the link's route becomes active. [routerLinkActive]
当链接的路由变为活动状态时,可将CSS类添加到元素。
HTML: HTML:
<a routerLink="/user/bob" routerLinkActive="class1">Bob</a>
CSS: CSS:
.class1 { background-color: red }
https://angular.io/api/router/RouterLinkActive https://angular.io/api/router/RouterLinkActive
What you could do is subscribe on router.events
to know when a navigation occurs. 您可以做的是在router.events
上订阅,以了解何时发生导航。 Then on NavigationEnd
retrieve the current route path value and apply it as a CSS class on the desired HTML element with ngClass
. 然后在NavigationEnd
检索当前路径路径值,并使用ngClass
将其作为CSS类应用于所需的HTML元素。
This means for example that navigating to home
page will add a home
class on the element you apply ngClass
. 例如,这意味着导航到home
将在您应用ngClass
的元素上添加一个home
类。 You can then set the CSS class to style the element as you want. 然后,您可以设置CSS类以根据需要设置元素的样式。
StackBlitz example available here: https://stackblitz.com/edit/angular-stackoverflow-52907143 可在此处找到StackBlitz示例: https ://stackblitz.com/edit/angular-stackoverflow-52907143
app.component.html 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 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 app.component.css
.default {
background: lightgray;
}
.about {
background: lightpink;
}
.home {
background: powderblue;
}
.products {
background: lightgreen;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.