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

Question

我想调用另一个与点击无关的组件的 function

服务文件

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

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

}

组成部分 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");
    }
  }

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

组件 1 Html

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

当我使用点击事件调用 function 时，它应该调用另一个组件的 function，我创建了一个服务文件，我可以在其中更改 boolean 变量。

我想在 boolean 变量发生变化时调用 function 而不是在 ngOnit() 上调用 function

Answer 1

使用主题订阅它。

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

// 任何组件都可以发布和订阅它

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