Estoy usando Angular 4 en una aplicación donde tengo 2 componentes ... app.component y other.component

En app.component.html tengo un div con una clase llamada myClass ...

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

El other.component.ts actualmente tengo:

ngOnInit() {

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

}

Quiero hacer esto de forma angular en lugar de usar jQuery.

Mi pregunta es ... ¿Cómo hago esto mismo con Angular 2+?

1
user8770372 8 nov. 2017 a las 13:34

2 respuestas

La mejor respuesta

Si OtherComponent está en otra ruta que AppComponent, entonces podrías usar un servicio para hacer eso:

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();
  });
}

my-service.service.ts

private sub: Subject<any> = new Subject();
public onOtherInit: Observable<any> = this.sub.asObservable();

emitEvent() { this.sub.next(/* anything you want */); }

otro.componente.ts

constructor(private myService: MyService) {}
ngOnInit() { this.myService.emitEvent(); }
1
user4676340user4676340 8 nov. 2017 a las 10:44

Al usar ngClass, puede usar declaraciones para agregar / eliminar una clase

En su componente:

yourBooleanValue: boolean;

ngOnInit() {
    this.yourBooleanValue = true;
}

En html:

<div [ngClass]="{ 'someClassName': yourBooleanValue }"></div>
0
Mark Verkiel 8 nov. 2017 a las 10:41