[問題]多個component,改變其中之一的class

大家好,
想請問頁面有多個相同的component 時, 更改其中一個component時, 如何才能不影響其他的component?
例如:

1. app.component.ts
在AppComponent 內利用for loop製造了許多component(因為大部分的框架一樣,只有一些view不同,想用ng-content換掉就好),而這些相同名子的Componnet的class不一樣(例如:col-md-5, col-md-8…)

@Component({
selector: ‘app-root’,
template: <counter *ngFor="let item of items; class="item.size"></counter>
})
export class AppComponent {

}

2.counter.component.ts
而在這component中,想要置換原本component的size
@Component({
selector: ‘counter’,
template: <div> it's a counter component <button class="btn" (click)="changeSize()">change counter size</button> </div>
})
export class CounterComponent {
changeSize() {
/*Q: 想請問在這function內,該用什麼方法可改變單一的class,而不是全部的class */
}
}

謝謝!!

@Input 的方式搭配 ngClass 使用,應該就可以達到你想要的東西

另外一種方式是使用 classList 的方式針對 element 去抽換 css class

1個讚

或者可以參考 @Kevin 大大在此篇的回文

倒數二樓有解釋,可以抓到Component的實體,

如果class是此Component的某個property,

也許可以這樣操作

謝謝大家的講解 我再好好的研究一下!!