Events 如何查找css类并将其添加到div';谁的孩子?

Events 如何查找css类并将其添加到div';谁的孩子?,events,angular,parent,target,Events,Angular,Parent,Target,你用的是Angular2,对吗?不需要像在jQuery中那样执行任何自定义JavaScript。下面是如何通过在组件中切换“showMyClass”值来添加类“myClass”,其中“showMyClass”属性是布尔值。或者让“showMyClass”成为一个布尔值数组。下面是一个完整的工作示例: showMore(event: any) { let parent = event.target.parentNode; <-- post-content-container //no

你用的是Angular2,对吗?不需要像在jQuery中那样执行任何自定义JavaScript。下面是如何通过在组件中切换“showMyClass”值来添加类“myClass”,其中“showMyClass”属性是布尔值。或者让“showMyClass”成为一个布尔值数组。下面是一个完整的工作示例:

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?
}
从'@angular/core'导入{Component,NgModule}
从“@angular/platform browser”导入{BrowserModule}
从'@angular/forms'导入{FormsModule};
@组成部分({
选择器:“我的应用程序”,
模板:`
一些很长的文本1
{{showMyClass[0]}
显示更多
一些很长的文本2
{{showMyClass[1]}
显示更多
`
})
导出类应用程序{
公共showMyClass:Array;
构造函数(){
this.showMyClass=[];
}
showMore(索引、事件:任意){
this.showMyClass[index]=!this.showMyClass[index];
}
}
@NGD模块({
导入:[BrowserModule,FormsModule],
声明:[App],
引导:[应用程序]
})
导出类AppModule{}

嗯,也许我的帖子不清楚。可以有几个带有post content div的post content容器,我不想将该类添加到所有容器中。我只想在单击按钮的地方添加该类。我已经用您更新的要求更新了我的答案:-)它对“showMyClass”使用了布尔数组,而不是单个属性。这不是最好的实现,但它很有效,你明白了。谢谢。你给了我一个好主意。我做的有点不同,但也有索引的使用。
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?
}
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 {}