Question

我在一个应用程序中使用Angular 4，我有2个组件... app.component和other.component

在 app.component.html 上我有一个名为 myClass 的类的div ...

<div class="myClass"></div>

在other.component.ts我目前有：

ngOnInit() {

 jQuery('.myClass').removeClass();
 jQuery('.myClass').addClass('someClassName');

}

我想以角度方式而不是使用jQuery。

我的问题是......我如何使用Angular 2+做同样的事情？

Answer 1

如果OtherComponent位于AppComponent以外的其他路线上，那么您可以使用服务来执行此操作：

app.component.html

<div class="myClass" #concernedDiv></div>

<强> app.component.ts

@ViewChild('concernedDiv') concernedDiv: ElementRef;

constructor(private myService; MyService) {}

ngOnInit() {
  this.myService.onOtherInit.subscribe(event => {
    this.concernedDiv.className = this.concernedDiv.replace('myClass', '').trim();
  });
}

我-service.service.ts

private sub: Subject<any> = new Subject(); public onOtherInit: Observable<any> = this.sub.asObservable(); emitEvent() { this.sub.next(/* anything you want */); }

<强> other.component.ts

constructor(private myService: MyService) {} ngOnInit() { this.myService.emitEvent(); }

Answer 2

通过使用ngClass，您可以使用语句添加/删除类

在您的组件中：

yourBooleanValue: boolean;

ngOnInit() {
    this.yourBooleanValue = true;
}

在html中：

<div [ngClass]="{ 'someClassName': yourBooleanValue }"></div>

Angular 2+添加或删除属于另一个组件的元素类

2 个答案: