버튼 클릭시 클래스 추가 및 제거 방법

Question

각도를 사용 중입니다. 제목과 일부 하위 정보 (예 : 날짜)와 같은 몇 가지 기본 정보를 설명하는 HTML이 포함 된 구성 요소가 있습니다.

클래스를 추가하여 글꼴을 변경하는 데 사용하고 싶은 몇 가지 버튼이 있습니다. 세 개의 버튼 중 하나를 클릭하면 부모 div에 클래스를 적용 할 수 있습니다 (CSS를 사용하면 그에 따라 자식 요소를 변경할 수 있습니다. 각 요소에 클래스를 추가하는 것과 반대). designOne/designTwo 다른 하나는 제거되었습니다.

<div> 
    <h1 class="albumHeader"> Header One </h1> 
    <span class="albumDate"> 12/12/2017 </span> 
    <span class="albumCategory"> Jazz </span> 
</div> 


<button> Design One </button> 
<button> Design Two </button> 
<button> Design Three </button> 

Answer 1

이 할 수있는 아주 쉬운 방법은 구성 요소 속성에 부모 클래스의 속성을 결합하고 버튼을 클릭하여이 속성을 변경하는 것입니다.

템플릿 :

<div [class]="currentParentClass"> 
    <h1> class="albumHeader" Header One </h1> 
</div> 
<button (click)="switchClass('designOne')"> Design One </button> 
<button (click)="switchClass('designTwo')"> Design One </button> 

구성 요소 : 당신이 시도하고 정확하게 그것으로 문제가 무엇 무엇을 그래서

private currentParentClass = "designOne" 

switchClass(selectedName: string) { 
    this.currentParentClass = selectedName 
} 

Answer 2

올바른 조건으로 부모 div의 ng 클래스가 작업해야합니다. 버튼을 클릭하면 ng-click을 사용하여 해당 조건에 사용되는 변수가 변경됩니다.

AngularJS와 : https://docs.angularjs.org/api/ng/directive/ngClass

각도 : https://angular.io/api/common/NgClass