Как я могу вызвать функцию из компонента A, который содержится в компоненте B, и эти компоненты находятся на одном уровне

Question

У меня есть что-то вроде этого:

Мои компоненты

<ComponentA></ComponentA>
<ComponentB></Componentb>

---

    import { Component, OnInit } from "@angular/core";
    @Component({
      selector: "component",
      templateUrl: "<button (click)=""></button>" //I need call fn_componentB
    })
    export class ComponentA implements OnInit {
      constructor() {}
      ngOnInit() {}

    }

    import { Component, OnInit } from "@angular/core";
    @Component({
      selector: "component",
      templateUrl: "./component.component.html",
      styleUrls: ["./component.component.scss"]
    })
    export class ComponentB implements OnInit {
      constructor() {}
      ngOnInit() {}

      fn_componentB() {
        alert("call");
      }
    }

Я хочу, чтобы когда я нажимал на кнопку, содержащуюся в моей component A, функция называется который содержится в моем component B (fn_componentB). Как мне это сделать? Я пробовал viewchild и вывод, но не уверен, что лучше.

Answer 1

Это можно сделать, присвоив компоненту B идентификатор и вызвав в нем метод publi c, например:

<div>
    <app-component-a (click)="compB.doSomething();"></app-component-a>
    <app-component-b #compB></app-component-b>
</div>

Компонент B определяет doSomething как обычный метод publi c;

public doSomething() { }