0

tengo 2 componentes una llamada slider y otra llamada nav

en la vista de slider utilizo [className]="myclass" para asignarle una clase desde la variable myclass, cuando hago cambios desde la misma componet slider, esta variable cambia con normalidad pero cuando instancio desde la componente nav para utilizar el metodo que hace cambiar la variable myclass no se modifica en la vista del slider.

cambioClase(lang){
if(lang == 'ct' || lang == 'cs'){
  this.myclass= 'clase1';
}else if(lang == "en"){
  this.myclass= 'clase2';
}

}

INSTANCIA DESDE OTRA COMPONENTE

cambiarLenguage(language: string) {
window.localStorage.setItem('lang', language);
this.translate.use(language);
let slider = new SliderComponent();
slider.cambioClase(language);

}

slider.html

  <div [className]="myclass">
    <span class="color-yellow">{{ 'SLIDER.1' | translate }}</span>
    <span>{{ 'SLIDER.2' | translate }}</span>
   </div>
6
  • Probaste utilizando [ngClass]? el 29 dic. 2017 a las 17:23
  • si con ambos me ocurre lo mismo , como te comento si ejecuto el cambio desde la misma componente , funciona perfecto , pero si desde otra componente instancio y ejecuto el methodo que cambia la variable myclass pues veo en la consola que si cambia pero en la vista la variable no cambia. el 29 dic. 2017 a las 17:28
  • Hazlo mediante un servicio y/o una variable @Input(), con un Observable, para obviar problemas. Has intentado eso? el 29 dic. 2017 a las 17:30
  • si he leido sobre los observables pero se me hace muy complejo hacerlo el 29 dic. 2017 a las 17:51
  • este es mi metodo que hace el cambio de clase el 29 dic. 2017 a las 17:52

1 respuesta 1

1

Problema:

El problema esta en que instancias un nuevo componente, el cual no se esta mostrando, debes comunicarte con el componente existente mediante un servicio en mi opinión.

Solución:

Te dejo un ejemplo utilizando Subject, para notificar cambios y/o enviar información entre componentes de manera efectiva, ya que @Input() se torna tedioso cuando están muy separados.

Ejemplo:

Servicio de Alerta: En este servicio se hace uso de Subject, un tipo de Observable, que permite enviar un mensaje, mediante el metodo .next() a todos los que estén subscriptos al mismo. Quienes estén subscriptos a este elemento recibirán el objeto que se ponga dentro del método .next(). En tu caso, sera el nuevo calor de la variable Class

@Injectable()
export class AlertService {
  private subject = new Subject<any>();

  constructor() {
  }

  public success(message: string) {
    this.subject.next({type: 'success', text: message});
  }

  public error(message: string) {
    this.subject.next({type: 'error', text: message});
  }

  public getMessage(): Observable<any> {
    return this.subject.asObservable();
  }
}

Componente que recibe la alerta:

En este componente debes inyectar el servicio en el constructor y suscribirte a su Observable (Subject es un tipo de Observable), mediante el método .subscribe(), entonces cada vez que se envié un nuevo 'mensaje' este lo detectada y podrás realizar una acción determinada o asignar ese valor a una variable, en tu caso la Class.

@Component({
})
export class AlertComponent implements OnInit, OnDestroy {
subscription: Subscription;

  constructor(private alertService: AlertService){}

ngOnInit() {
    this.subscription = this.alertService.getMessage().subscribe(message => {
      if (message.text) {
        switch (message.type) {
          case 'success':
            this.showSuccess(message.text);
            break;
          case 'error':
            this.showError(message.text);
            break;
        }
      }
    });
  }

ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

Componente que emite el alerta:

En este componente debes inyectar el servicio que contiene el Observable, y enviar la variable, en este ejemplo en particular se envía el mensaje que se desea mostrar y ya el método del servicio setea el tipo de notificación. En tu caso, con solo enviar el nuevo valor de la Class seria suficiente.

@Component({
})
export class NotificationsComponent implements OnInit, OnDestroy {
  constructor(private alertService: AlertService){}

  ngOnInit() {
     this.alertService.success('Exito al enviar mensaje');
  }

Documentación:

Puedes encontrar mar información sobre el tipo Subject aquí.

Puedes encontrar mas información sobre Servicio en Angular aquí.

2
  • en la componente que recibe la alerta veo que tiene un metodo llamado getMessage() el cual no se encuentra dentro del servicio de alerta , que deberia contener o como deberia hacerlo para probar el ejemplo que me brindaste. el 5 ene. 2018 a las 16:03
  • Es un simple getter, por eso lo obvie. Ahora lo agrego. el 5 ene. 2018 a las 16:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.