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
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.