구성 요소 태그에 스타일 클래스를 추가하기 위한 Angular5 단계 지침

이번에는 Angular5에서 컴포넌트 태그에 스타일 클래스를 추가하는 방법을 단계별로 알려드리겠습니다. Angular5에서 컴포넌트 태그에 스타일 클래스를 추가할 때의 주의사항은 무엇입니까? 바라보다.

Angular 5에서 구성 요소 자체의 레이블에 스타일을 추가하는 방법에는 두 가지가 있습니다.

방법 1: @Component

@Component({
 selector : 'myComponent',
 host : {
  '[style.color]' : "'red'", 
  '[style.background-color]' : 'backgroundColor'
 }
})
class MyComponent {
 backgroundColor: string;
 constructor() {
  this.backgroundColor = 'blue';
 }
}

의 호스트 속성을 사용하여 호스트 구성에 속성을 추가합니다. 라벨의 바인딩 속성 사용.

스타일 설정:

1. '[style.color]': "'red'": 빨간색 값의 큰따옴표 안에 작은따옴표가 있다는 점에 유의하세요.

2. '[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 중국어 웹사이트에서!

추천 도서:

React Router v4 사용에 대한 자세한 설명

vue form 시작 지침

위 내용은 구성 요소 태그에 스타일 클래스를 추가하기 위한 Angular5 단계 지침의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!