条件ngClass基于当前URL

Question

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

添加：

基本上，我需要获取当前URL并将其绑定到元素的条件ngClass，这样如果它是url1，那么class1将应用于该元素;否则class2适用。

Answer 1

您可以使用路由器找出当前网址是什么...

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

正如the documentation所述，[ngClass]期望几种类型的表达：

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

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

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

这不是特定于ngClass，而是整个Angular模板语法。

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>