基于当前URL的条件NGCLASS

Question

如何使用Angular NgClass实现url1 ? class1 : class2？

添加：

基本上，我需要获取当前的URL并将其绑定到元素的条件ngclass，以便如果它是url1，则将class1应用于该元素。否则将应用class2。

Answer 1

您可以使用路由器找出当前URL ...

export class Component implements OnInit {
    public url1: string = "";
    constructor(private router: Router) {}
    ngOnInit() {
        this.url1 = this.router.url;
    }
}

然后，[ngClass]="url1 ? 'style1' : 'style2'"应该正常工作。

不要忘记导入路由器： import { Router } from '@angular/router';

Answer 2

正如文档所述，[ngClass]期望几种类型的表达式：

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

其中一个字符串表达式。是

[ngClass]="url1 ? 'style1' : 'style2'"

这不是针对ngclass的特定，而是整体上的角模板语法。

Answer 3

我们可以在组件中添加一种方法，该方法基于URL返回不同的类名称：

class MyComponent {
  getClasses() {
     const patterns = [
       {
         pattern: /a.com/,
         className: 'serving-from-a',
       },
       {
         pattern: /b.com/,
         className: 'serving-from-b',
       },
     ];
     return patterns
         .filter(p => p.pattern.test(window.location))
         .map(p => p.className)
         .join(' ');
  }
}

我们可以在模板中使用此方法

<div [ngClass]="getClasses()"></div>