입력 속성을 기반으로 구성 요소에 클래스를 추가하는 가장 좋은 방법은 무엇입니까?

2020-08-01 angular

사용자 정의 버튼 구성 요소를 만들려고하는데 속성을 기반으로 특정 클래스를 추가해야합니다 (예 :

<mybutton primary>Primary button</mybutton>

이 컴포넌트에이 클래스를 추가해야합니다.

.primary {
   background-color: green;
}

나는 이것을 만들 수있는 방법에 대한 아이디어 나 자습서를 찾고 있습니다.

Answers

  1. 컴포넌트 호스트 요소에서 클래스를 설정해야하는 경우

mybutton 구성 요소에 아래를 추가하십시오.

import { Component, OnInit, Input, HostBinding } from '@angular/core';

...

@Input()
@HostBinding('class')
color = "primary"

color 입력을 통해 값을 수락하고 구성 요소의 호스트 요소 클래스를 전달 된 값으로 설정합니다. (기본값은 1 차입니다)

  1. 컴포넌트 내부의 요소에 클래스를 설정해야 할 때
@Input()
color = 'primary';
<button [ngClass]="color">
   <ng-content></ng-content>
</button>

이것은 color 입력을 통해 클래스 이름을 전달하고 ngClass 를 통해 button 요소의 클래스를 설정합니다.

참고 :

또한 구성 요소 선택기 사이에 텍스트를 표시하려면 (예 : 질문의 Primary button ) 다음을 추가해야합니다.

<ng-content></ng-content>

mybutton 구성 요소 HTML에서.

데모 :

https://stackblitz.com/edit/custom-attributes

mybutton에 입력 특성 className을 추가하고 값을 전달하십시오.

@Input() className: string;

mybutton 템플릿의 값을 바인딩하십시오.

< div [class] ="className" >Some text</div>

Related