0

Estoy tratando de implementar un tema oscuro en mi proyecto Angular pero recibí este error:

La propiedad 'suscribe' no existe en el tipo 'boolean'

He creado un servicio para controlar esta función (no estoy seguro de si esta es la mejor manera de hacerlo, pero no pude encontrar un tutorial decente sobre esto).

este es el servicio.

import { Injectable } from '@angular/core';

    @Injectable({
      providedIn: 'root'
    })
    export class DarkService {

      dark: boolean;
      constructor() {

        this.dark = false;
        console.log('servicio Dark iniciado valor', this.dark);

      }


      setActivation() {
        this.dark = !this.dark;
        console.log('value', this.dark);
      }

      getActivation() {
        console.log('value', this.dark);
        return this.dark;
      }    
    }

Estoy llamando a su método setActivation () a través del componente de la barra de navegación introducir la descripción de la imagen aquí

HTML switch code

 <div class="switch">
      <label>
        Light
        <input type="checkbox" (change)="Activador()" >
        <span class="lever"></span>
        Dark
      </label>
    </div>

Y su codigo TS

import { Component, OnInit } from '@angular/core';
    import { DarkService } from '../../../services/dark.service';

    @Component({
      selector: 'app-navbar',
      templateUrl: './navbar.component.html',
      styles: []
    })
    export class NavbarComponent implements OnInit {

      dark: any;
      constructor(dark: DarkService) {
        this.dark = dark;
      }

      ngOnInit() {
      }

      Activador() {
        this.dark.setActivation();
      }

Aparentemente funciona bien, muestra 'verdadero' o 'falso' en la consola, pero el problema es cuando trato de suscribirme a .getActivation () en otro componente.

En este caso, he creado otro componente llamado notice-card

<div *ngFor="let noticia of noticias">
    <div class="card horizontal z-depth-5" [ngClass]="{'card-dark': dark}">
      <div class="card-image s12">
        <img [src]="noticia.urlToImage | noImg">
      </div>
      <div class="card-stacked">
        <div class="card-content card-content purple-text text-darken-4">
          <p class="flow-text">{{noticia.title}}</p>
          <br>
          <p class="hide-on-mobile ">{{noticia.content}}</p>
          <a [href]="noticia.url" target="blank" class="btn purple darken-4">
            Read more on {{noticia.source.name}}</a>
        </div>
      </div>
    </div>
    </div>

y su codigo TS donde tengo el problema cuando trato de utilizar el subscribe

import { Component, OnInit, Input } from '@angular/core';
    import { DarkService } from '../../../services/dark.service';

    @Component({
      selector: 'app-notice-card',
      templateUrl: './notice-card.component.html',
      styles: []
    })
    export class NoticeCardComponent {


      @Input() noticias: any[] = [];

      dark: any;

      constructor(private darkService: DarkService) {

        this.getDark();

      }


      getDark() {

        this.darkService.getActivation().subscribe((activacion: any) => {
          this.dark = activacion;
        });

          }    
    }

Les pido su ayuda amigos de SO.

2 respuestas 2

2

Por lo que puedo observar su problema es que quiere suscribir una accion sincrona y esto solo es posible para operaciones asincronas(Observables/Promises)

suscribe() -> Observables

then() -> Promises

Teniendo esto en cuenta si usted cambia:

...
      setActivation() {
        this.dark = !this.dark;
        console.log('value', this.dark);
      }

      getActivation() {
        console.log('value', this.dark);
        return this.dark;
      }   
...

por

import { Observable } from 'rxjs/Observable';
...

  setActivation() {
    this.dark = !this.dark;
    console.log('value', this.dark);        
  }

  getActivation() {
    console.log('value', this.dark);
    return Observable.of(this.dark);
  }   

Esto le va a resolver el problema.

Despues de intercambiar con @Lobos sobre la solucion inicial que es la solucion mas simple posible decidi agregar una solucion mas completa para que usted decida cual es la solucion que mejor se ajusta a su problema:

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DarkService {

  private _value: boolean = false;
  dark = new Subject<boolean>();


  setActivation() {  
    this._value = !this._value;  
    this.dark.next(this._value);    
  }

  getActivation() : Observable<boolean> {
    console.log('value', this.dark); // Esto muestra el subject
    return this.dark.asObservable();  
  }    
}

uso:

 cambia(){
   this._service.setActivation();

   this._service.getActivation().subscribe(x => {      
    console.log('valor',x);
  });  
 }

Salida:

valor:true

valor:false

valor:true ....

Ahora tiene otra solucion para resolver el mismo problema. Yo no considero una buena idea tener un EventEmitter en un servicio, pero esa solucion tambien permite tener el mismo resultado.

1

getActivation() retorna un boolean no un observable por eso no se puede suscribir.

Una solución es agregar un EventEmitter, cuando se cambie el valor de this.dark se emite el nuevo valor y los suscriptores pueden reaccionar:

    export class DarkService {
          // agregar un event emitter
          emitter = new EventEmitter<boolean>();

          // resto de código ...

          getActivation() {
            console.log('value', this.dark);
           // retornar el emitter para poder suscribirse
           return this.emitter;
          } 

          setActivation() {
           this.dark = !this.dark;

           // emitir valor cuando this.dark cambia de estado
           this.emitter.emit(this.dark);

           console.log('value', this.dark);
         }    
     } 
4
  • Hola, me gustaria preguntarle porque me parece interesante su solucion, cual es el motivo por el cual usted usa 2 tipos de comunicacion en Angular para resolver este problema, que puede ser resuelto con cada uno por separado? Digase, Emitter se usa para comunicacion Component Hijo hacia el Padre Servicio se usa para acceder al mismo origen de datos desde multiples componentes. Gracias por su explicacion por adelantado.
    – J. B
    Commented el 29 abr. 2020 a las 22:54
  • No uso dos tipos de comunicación, si fuera entre hijo y padre se debería usar @Output. Emitter es un observable y tiene el método emit() que es útil para enviar eventos a los suscriptores de forma sencilla. Si solo se hace Observable.of() los suscriptores recibirían el valor una sola vez. Y el problema aquí es que se quiere cambiar el tema de la aplicación y en ese momento comunicar a los suscriptores de ese cambio.
    – Lobos
    Commented el 30 abr. 2020 a las 0:05
  • Gracias @Lobo, por su comentario, agregue la solucion completa. La primera solucion fue solo algo simple para mostrar como resolver el problema sin dolores de cabeza. Ademas la explicacion sobre el EventEmitter no me deja claro el porque y definitivamente he usado esa solucion pero la elimine como una posibilidad despues de analizar las variantes.
    – J. B
    Commented el 30 abr. 2020 a las 1:20
  • Lobos y J.B les agradezco mucho, emitiendo el evento si funciono correctamente, y si Lobos tiene razón, en este caso utilizo el un servicio básicamente por 2 razones, la mayoría de componentes a los que implementare esta función son sibling-components no hay relación padre a hijos y también porque me va a facilitar cuando utilice el localStorage, Commented el 30 abr. 2020 a las 2:13

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.