Как вызвать метод одного компонента из другого [Angular]

Question

Я новичок в веб-разработке. Я работаю над проектом Angular. У меня есть два компонента: панель фильтра и панель фильтра . Никто из них не является родителем-ребенком по отношению друг к другу. Я проверил некоторые решения, такие как:

Доступ к методу одного компонента из другого

и многие другие решения в inte rnet.

Я попробовал два подхода:

1. @ ViewChild

2. Служба в angular

   Но все равно я получаю ошибку.

ОШИБКА TypeError: "_co.filterPanel не определен"

Вот мой код.

filter-bar.component. html

<button (click)="filterPanel.filterPanelMethod()">Call</button>

filter-bar.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { FilterPanelComponent } from './filter-panel/filter-panel.component';
import { FilterPanelService } from './filter-panel/filter-panel.service';

@Component({
    selector: 'app-filter-bar',
    templateUrl: './filter-bar.component.html'
})
export class FilterBarComponent implements OnInit {
    @ViewChild(FilterPanelComponent, {static : false}) public filterPanel: FilterPanelComponent;

    constructor(public filterPanelService: FilterPanelService) {      
      //filterPanelService.filterPanelMethod();
    }

    ngOnInit() {
    }
}

filter-panel.component.ts

import { Component, OnInit } from '@angular/core';
import {FilterPanelService} from './filter-panel.service';
@Component({
    selector: 'app-filter-panel',
    templateUrl: './filter-panel.component.html'
})
export class FilterPanelComponent implements OnInit {

    constructor(public filterPanelService:FilterPanelService) {
    }

    filterPanelMethod() {
      console.log("I'm filter-panel method");
    }

    ngOnInit() {}
}

Отправка и получение данных здесь не требуются. Я просто хочу посмотреть, как вызывается метод, а обо всем позабочусь. Я уверен, что я где-то совершаю ужасную ошибку. Я также создал stackblitz . Я боюсь, что я смешал два подхода и запутался. Пожалуйста, поправьте меня.

Answer 1

Вам необходимо внести следующие два изменения:

1. Вызвать панель фильтров из filter-bar.component. html

   <app-filter-panel></app-filter-panel>
   

2. В файле filter-bar.component.ts вам необходимо получить доступ к справочнику услуг, используя this. Например:

    this.filterPanelService.someMethod();
   

Answer 2

Вам нужно поместить FilterPanelComponent внутри FilterBarComponent , если вы хотите получить к нему доступ с помощью @ ViewChild . Теперь вы используете их оба в компоненте приложения, поэтому вы не можете получить к нему доступ. Если вы хотите обеспечить связь между ними, я предлагаю вам создать службу с Субъектом , которую один из них будет прослушивать, а затем предпринять действия, когда это ожидается.

Другое решение но довольно уродливо

1. Доступ к @ViewChild(FilterPanelComponent, {static : false}) public filterPanel: FilterPanelComponent; внутри AppComponent
2. Событие Emit from FilterBarComponent в AppComponent при нажатии кнопки
3. прослушивание этого события в AppComponent и вызов метода из FilterPanelComponent