각도 2/4/5의 매트/카드에 스타일/attibute 지시문을 추가 할 수 있습니까?

Question

각도 2, 각도 4 및 각도 5 (동일한 문제가 발생할 수 있음).

매트 카드 지시문에 사용자 지정 문을 추가 할 때 카드 스타일이 작동하지 않고 엉망입니다.

이 방법이 있습니까?

Answer 1

질문에 대한 해결책을 찾았습니다.

• 지시를 (사용자 정의 지침의 내부), 변명
• 아래 코드를 참조 Using an Angular Directive to Add Class to Host Element을 참조하여 클래스 (들)을 제거/'에 동일시 States.ok 등을 추가 할 수
• 사용 renderer2 만들기

protected _state = States.ok; 
 

 
    @Input('state') 
 
    public set state(value: string) { 
 
     console.log('CARD STATE: ', value); 
 
     switch (value) { 
 
      case States.ok: 
 
      case States.warn: 
 
      case States.danger: 
 
       // this.elementClass = 'app-dashboard-card-' + value; 
 
       this.setClass(value); 
 
       break; 
 
      default: 
 
       throw new Error('DashboardItemComponent: state not recognised'); 
 
     } 
 
     this._state = value; 
 
    } 
 

 
    constructor(private renderer: Renderer2, private hostElement: ElementRef) { 
 
     renderer.addClass(hostElement.nativeElement, 'custom-theme'); 
 
    } 
 

 
    setClass(state: string) { 
 
     this.renderer.removeClass(this.hostElement.nativeElement, OK_CLASS); 
 
     this.renderer.removeClass(this.hostElement.nativeElement, WARN_CLASS); 
 
     this.renderer.removeClass(this.hostElement.nativeElement, DANGER_CLASS); 
 
     this.renderer.addClass(this.hostElement.nativeElement, 'app-dashboard-card-' + state); 
 
    }