div의 자식 중 하나에 CSS 클래스를 찾아 추가하는 방법은 무엇입니까?

Question

<div class="post-content-container"> 
    <div class="post-content"> 
    Some very long text 
    </div> 
    <button (click)="showMore($event)">Show more</button> 
</div> 

<div class="post-content-container"> 
    <div class="post-content"> 
    Some very long text 
    </div> 
    <button (click)="showMore($event)">Show more</button> 
</div> 

<div class="post-content-container"> 
    <div class="post-content"> 
    Some very long text 
    </div> 
    <button (click)="showMore($event)">Show more</button> 
</div> 

버튼을 클릭 한 후 post-content에 수업을 추가하고 싶습니다. 음, 먼저 부모를 찾아야 해, 그렇지? 그런 다음 그 중 하나를 찾아서 맞춤 CSS 클래스를 추가하고 싶습니다.

showMore(event: any) { 
    let parent = event.target.parentNode; <-- post-content-container 
    //now, how to get into parent's child (I mean post-content) and add to it some custom css class? 
} 

Answer 1

오른쪽 각도 2를 사용하고 있습니까? jQuery에서와 같이 사용자 정의 JavaScript를 수행 할 필요가 없습니다. 다음은 "showMyClass"속성이 부울 값인 구성 요소의 "showMyClass"값을 토글하여 "myClass"클래스를 추가하는 방법입니다. 또는 "showMyClass"에 부울 배열을 만듭니다. 다음은 전체 작동 예제입니다.

import { Component, NgModule } from '@angular/core' 
import { BrowserModule } from '@angular/platform-browser' 
import { FormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    template:` 
    <div class="post-content-container"> 
     <div class="post-content" [ngClass]="{myClass: showMyClass[0]}"> 
     Some very long text 1 
     {{showMyClass[0]}} 
     </div> 
     <button (click)="showMore(0, $event)">Show more</button> 
    </div> 

    <div class="post-content-container"> 
     <div class="post-content" [ngClass]="{myClass: showMyClass[1]}"> 
     Some very long text 2 
     {{showMyClass[1]}} 
     </div> 
     <button (click)="showMore(1, $event)">Show more</button> 
    </div> 
    ` 
}) 
export class App { 
    public showMyClass: Array<boolean>; 

    constructor(){ 
     this.showMyClass = []; 
    } 

    showMore(index, event: any) { 
     this.showMyClass[index] = !this.showMyClass[index]; 
    } 
} 


@NgModule({ 
    imports: [ BrowserModule, FormsModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}