如何使用点击事件从另一个组件调用 function

Question

I want to call a function of another component which has no relation on the click

servive File

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

@Injectable()
export class ShareDetailsService {
  clicked : boolean = false;
  constructor() { }

}

component 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");
    }
  }

Component 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(){
  }
  

Component 1 Html

<div (click)="someFunction()"></div>

When I call the function using the click event it should call the function of the another component, I created a service file and where I am able to change the boolean variable.

I Want to call the function when there is a change in the boolean Variable rather than calling the function on ngOnit()

Answer 1

Use a subject to subscribe to it.

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs' 
@Injectable()
export class ShareDetailsService {
  clicked$ = new Subject();    
}

// Any component can post and subscribe to it

@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
  }
}