[angular] 호스트 요소에“클래스”를 추가하는 방법은 무엇입니까?

Program / 글쓴이

<component></component>동적 클래스 속성을 구성 요소에 추가하는 방법을 모르지만 템플릿 html (component.html) 안에는 없습니다.

내가 찾은 유일한 해결책은 “ElementRef”기본 요소를 통해 항목을 수정하는 것입니다. 이 솔루션은 매우 간단한 작업을 수행하는 데 약간 복잡해 보입니다.

또 다른 문제는 CSS를 구성 요소 범위 외부에서 정의하여 구성 요소 캡슐화를 중단해야한다는 것입니다.

더 간단한 해결책이 있습니까? <root [class]="..."> .... </ root>템플릿 내부 와 같은 것 .

답변

@Component({
   selector: 'body',
   template: 'app-element',
   // prefer decorators (see below)
   // host:     {'[class.someClass]':'someField'}
})
export class App implements OnInit {
  constructor(private cdRef:ChangeDetectorRef) {}

  someField: boolean = false;
  // alternatively also the host parameter in the @Component()` decorator can be used
  @HostBinding('class.someClass') someField: boolean = false;

  ngOnInit() {
    this.someField = true; // set class `someClass` on `<body>`
    //this.cdRef.detectChanges(); 
  }
}

플 런커 예

이 방법으로 컴포넌트 외부에 CSS를 추가 할 필요가 없습니다. CSS는 좋아

:host(.someClass) {
  background-color: red;
}

구성 요소 내부에서 작동하며 클래스 someClass가 호스트 요소에 설정된 경우에만 선택기가 적용됩니다 .

답변

Günter의 답변은 훌륭하지만 (질문은 동적 클래스 속성을 요구 합니다) 완전성을 위해 추가 할 것이라고 생각했습니다 …

하나 이상의 정적 클래스를 구성 요소의 호스트 요소에 추가하는 (즉, 테마 스타일링 목적으로) 빠르고 깔끔한 방법을 찾고 있다면 다음을 수행 할 수 있습니다.

@Component({
   selector: 'my-component',
   template: 'app-element',
   host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}

그리고 entry 태그에서 클래스를 사용하면 Angular는 클래스를 병합합니다.

<my-component class="someClass2">
  I have both someClass1 & someClass2 applied to me
</my-component>

답변

@Component 클래스 @HostBinding('class') class = 'someClass';안에 간단히 추가 할 수 있습니다 .

예:

@Component({
   selector: 'body',
   template: 'app-element'       
})
export class App implements OnInit {

  @HostBinding('class') class = 'someClass';

  constructor() {}      

  ngOnInit() {}
}

답변

호스트 요소에 동적 클래스를 추가하려면 다음 HostBinding과 같이 getter와 결합하십시오.

@HostBinding('class') get class() {
    return aComponentVariable
}

https://stackblitz.com/edit/angular-dynamic-hostbinding의 Stackblitz 데모

답변

내가 한 방법은 다음과 같습니다 (Angular 7).

컴포넌트에서 입력을 추가하십시오. 

@Input() componentClass: string = '';

그런 다음 구성 요소의 HTML 템플릿에서 다음을 추가하십시오.

<div [ngClass]="componentClass">...</div>

마지막으로 구성 요소를 인스턴스화하는 HTML 템플릿에서 :

<root componentClass="someclass someotherclass">...</root>

면책 조항 : 저는 Angular를 처음 접하므로 여기에서 운이 좋을 것입니다!

답변