이번에는 컴포넌트 태그에 스타일을 추가하는 방법과 컴포넌트 태그에 스타일을 추가할 때 주의사항에 대해 소개하겠습니다. 다음은 실제 사례입니다.
방법 1: @Component
@Component({
selector : 'myComponent',
host : {
'[style.color]' : "'red'",
'[style.background-color]' : 'backgroundColor'
}
})
class MyComponent {
backgroundColor: string;
constructor() {
this.backgroundColor = 'blue';
}
}의 호스트 속성을 사용하여 호스트 구성에 속성을 추가합니다. 이는 라벨의 바인딩 속성을 사용하는 것과 같습니다.
스타일 설정:
'[style.color]': "'red'": 빨간색 값의 큰따옴표 안에 작은따옴표가 있다는 점에 유의하세요.
'[style.Background-color]':'BackgroundColor': 이는 구성 요소의 변수 backgroundColor를 나타냅니다.
이 방법의 장점은 스타일에 구성 요소 변수를 사용할 수 있다는 것입니다.
클래스 설정:
@Component({
selector : 'myComponent',
host : {
'[class.myclass]' : 'showMyClass'
}
})
class MyComponent {
showMyClass = false;
constructor() {
}
toggleMyClass() {
this.showMyClass = !this.showMyClass;
}
}방법 2: 사용:스타일의 호스트 선택기
@Component({
selector : 'myComponent',
styles : [`
:host {
color: red;
background-color: blue;
}
`]
})
class MyComponent {}이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트에서!
추천 자료:
Number에서 가장 큰 요소와 가장 작은 요소 가져오기
위 내용은 구성 요소 태그에 스타일 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
