Quiero llamar a una función de otro componente que no tiene relación con el clic.
archivo de servicio
import { Injectable } from '@angular/core'; @Injectable() export class ShareDetailsService { clicked : boolean = false; constructor() { } }componente 2
@Component({ selector: 'app-component2', templateUrl: './component2.component.html', styleUrls: ['./component2.component.css'] }) export class Component2Component implements OnInit { constructor(shareDetailsService : ShareDetailsService) { } ngOnInit() { if(shareDetailsService.clicked){ console.log("clicked"); } }Componente 1
@Component({ selector: 'app-component1', templateUrl: './component1.component.html', styleUrls: ['./component1.component.css'] }) export class Component1Component implements OnInit { constructor(shareDetailsService : ShareDetailsService) { } ngOnInit() { if(shareDetailsService.clicked){ console.log("clicked"); } } someFunction(){ }Componente 1 Html
<div (click)="someFunction()"></div>Cuando llamo a la función usando el evento de clic, debería llamar a la función del otro componente, creé un archivo de servicio y donde puedo cambiar la variable booleana.
Quiero llamar a la función cuando hay un cambio en la variable booleana en lugar de llamar a la función en ngOnit()
Usa un asunto para suscribirte.
import { Injectable } from '@angular/core'; import { Subject } from 'rxjs' @Injectable() export class ShareDetailsService { clicked$ = new Subject(); }// Cualquier componente puede publicar y suscribirse a él
@Component({ selector: 'app-component2', templateUrl: './component2.component.html', styleUrls: ['./component2.component.css'] }) export class Component2Component implements OnInit { constructor(shareDetailsService : ShareDetailsService) { this.sharedDetailsService.clicked$.subscribe(() => console.log('clicked') } onClick() { this.sharedDetailsService.clicked$.next(); // dispatch the click } }