호스트 요소에 "클래스"를 추가하는 방법은 무엇입니까?
구성 요소에 추가하는 방법을 모르겠습니다.<component></component>템플릿 html(component.dll) 내부의 동적 클래스 특성입니다.
제가 찾은 유일한 해결책은 "ElementRef" 네이티브 요소를 통해 항목을 수정하는 것입니다.그 해결책은 매우 간단해야 하는 것을 하기에는 조금 복잡해 보입니다.
또 다른 문제는 CSS가 구성 요소 범위 밖에서 정의되어 구성 요소 캡슐화를 중단해야 한다는 것입니다.
더 간단한 해결책이 있습니까?비슷한 것<root [class]="..."> .... </ root>템플릿 내부.
이렇게 하면 구성 요소 외부에 CSS를 추가할 필요가 없습니다.
@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는 구성 요소 내부에 정의되며 선택기는 클래스인 경우에만 적용됩니다.someClass호스트 요소에 설정됩니다(외부에서).
:host(.someClass) {
background-color: red;
}
귄터의 대답은 훌륭하지만(질문은 동적 클래스 속성을 묻는 것입니다), 저는 완전성을 위해 추가할 것이라고 생각했습니다...
구성 요소의 호스트 요소에 하나 이상의 정적 클래스를 신속하고 깨끗한 방법(예: 테마 스타일 지정 목적)으로 추가하려는 경우 다음 작업을 수행할 수 있습니다.
@Component({
selector: 'my-component',
template: 'app-element',
host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}
그리고 입력 태그에 클래스를 사용하면 Angular가 클래스를 병합합니다.
<my-component class="someClass2">
I have both someClass1 & someClass2 applied to me
</my-component>
간단히 추가할 수 있습니다.@HostBinding('class') class = 'someClass';@Component 클래스 안에 있습니다.
예:
@Component({
selector: 'body',
template: 'app-element'
})
export class App implements OnInit {
@HostBinding('class') class = 'someClass';
constructor() {}
ngOnInit() {}
}
호스트 요소에 동적 클래스를 추가하려면 다음을 결합할 수 있습니다.HostBinding의 기분으로
@HostBinding('class') get class() {
return aComponentVariable
}
https://stackblitz.com/edit/angular-dynamic-hostbinding 에서 Stackblitz 데모 진행
NONE-VERBOSE(호스트 바인딩) 순수 CSS 솔루션
또 다른 문제는 CSS가 구성 요소 범위 밖에서 정의되어야 하며 구성 요소 캡슐화가 깨진다는 것입니다.
이것은 사실이 아닙니다.SCSS(SASS)를 사용하면 구성 요소(자체; 호스트)를 다음과 같이 쉽게 스타일을 지정할 수 있습니다.
:host {
display: block;
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
visibility: hidden;
&.someClass {
visibility: visible;
}
}
이런 방식으로 캡슐화는 "끊기지 않음"입니다.
@JoshuaDavid 답변 외에도 정적 클래스를 정의하는 다른 방법이 있는데, 이는 제가 시도했을 때 각도 v8에서 작동합니다(이전 버전에서도 작동할 수 있음).
@Component({
selector: "my-component.someClass1.someClass2",
...
})
다음과 같은 출력을 생성합니다.
<my-component class="someClass1 someClass2">
...
</my-component>
다음과 같은 방법으로 사용할 수도 있습니다.
@Component({
selector: ".someClass1.someClass2",
...
})
다음과 같은 출력을 생성합니다.
<div class="someClass1 someClass2">
...
</div>
위에서 언급한 @jbojic와 같이 여러 클래스 상황에 대해 다음을 사용할 수 있습니다.
호스트: {class: 'ABC'}
이게 제가 한 일입니다.
import { Component, Attribute, HostBinding } from "@angular/core";
@Component({
selector: "selector-el",
template: ...
})
export class MyComponent {
@HostBinding('class') get classAttribute(): string {
let defaultClasses = 'selector-el-class';
return defaultClasses + ' ' + this.classNames;
}
constructor(
@Attribute('class') public classNames: string
) { }
}
호스트 바인딩된 클래스가 여러 개 있을 때 다음과 같은 사용법을 발견했습니다.HostBinding합니다. getter 가장편리다니합가다▁get니합get리.
@Component({ ... })
export class MyComponent {
@Input()
theme: 'success' | 'error';
@HostBinding('class')
get classes(): Record<string, boolean> {
return {
'my-component': true,
'my-component-success-theme': this.theme == 'success',
'my-component-error-theme': this.theme == 'error'
}
}
}
해당 논리가 없는 사소한 클래스 바인딩의 경우에도 모든 호스트 클래스를 한 곳에서 관리할 수 있습니다.
@Component({ ... })
export class MyComponent {
@HostBinding('class')
get classes(): Record<string, boolean> {
return {
'my-component': true,
'my-component-modifier': true
}
}
}
제가 한 방법은 다음과 같습니다(Angular 7).
구성 요소에 다음과 같은 입력을 추가합니다.
@Input() componentClass: string = '';
그런 다음 구성 요소의 HTML 템플릿에 다음과 같은 것을 추가합니다.
<div [ngClass]="componentClass">...</div>
마지막으로 구성 요소를 인스턴스화하는 HTML 템플릿에서:
<root componentClass="someclass someotherclass">...</root>
고지 사항:앵귤러는 처음이라 운이 좋을 것 같아요!
언급URL : https://stackoverflow.com/questions/34641281/how-to-add-class-to-host-element
'programing' 카테고리의 다른 글
| Git: 원격 분기를 로컬로 병합합니다. (0) | 2023.05.01 |
|---|---|
| Postgres 사용자가 존재하지 않습니까? (0) | 2023.05.01 |
| 다중 행 문자열 리터럴의 구문은 무엇입니까? (0) | 2023.05.01 |
| Float에서 날짜 시간 형식을 지정하는 방법 (0) | 2023.05.01 |
| VBA를 사용하여 Excel 셀의 배경색을 설정하려면 어떻게 해야 합니까? (0) | 2023.05.01 |