현재 URL을 기반으로 한 조건부 클래스

Question

url1 ? class1 : class2을 어떻게 구현합니까? ngClass?

ADDED : 기본적으로

, 나는 현재의 URL을 얻을 요소의 조건부 ngClass에 바인딩 할 필요가 그래서는 해당 요소에 적용되는 다음 url1, class1 경우; 그렇지 않으면 class2이 적용됩니다.

Answer 1

템플릿에이 방법을 사용할 수 있습니다

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(' '); 
    } 
} 

을 현재 URL은 무엇입니까?

export class Component implements OnInit { 
    public url1: string = ""; 

    constructor(private router: Router) {} 

    ngOnInit() { 
     this.url1 = this.router.url; 
    } 

} 

그런 다음 [ngClass]="url1 ? 'style1' : 'style2'"은 fin해야합니다. 이자형.

은 라우터를 가져올 것을 잊지 마십시오 : 귀하의 의견 import { Router } from '@angular/router';

Answer 2

the documentation으로 상태는, [ngClass]는 식의 여러 종류를 기대 : 그

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

한 문자열 식입니다. 그것은이 ngClass에 해당하지만 전체의 각도 템플릿 문법에없는

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

입니다.

우리는 URL에 따라 서로 다른 클래스 이름을 반환하는 구성 요소에 메서드를 추가 할 수 있습니다

Answer 3

: 우리는 당신이 찾을 라우터를 사용할 수 있습니다

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