Question

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

增加：

基本上，我需要获取当前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>

基于当前网址

3 个答案: