如何从另一个 [Angular] 调用一个组件的方法

Question

我是网络开发的新手。我正在做一个 Angular 项目。我有两个组件，filter-panel 和 filter-bar。他们都不是彼此的亲子关系。我检查了一些解决方案，例如：

Access a method of one component from another

以及互联网上的许多其他解决方案。

我尝试了两种方法：

1. @ViewChild

2. 角度服务

   但我仍然遇到错误。

ERROR TypeError: "_co.filterPanel is undefined"

这是我的代码。

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

如果您想使用 @ViewChild 访问 FilterPanelComponent，则需要将 FilterPanelComponent 放在 FilterBarComponent 视图中。现在您在应用程序组件中同时使用它们，这就是您无法访问它的原因。如果您想在它们之间提供通信，我建议您创建一个带有 Subject 的服务，其中一个会监听该服务，然后在预期时采取行动。

另一种解决方案，但相当丑陋的是

1. 在 AppComponent 中访问 @ViewChild(FilterPanelComponent, {static : false}) public filterPanel: FilterPanelComponent;
2. 点击按钮时从FilterBarComponent向AppComponent发出事件
3. 在 AppComponent 中监听该事件并从 FilterPanelComponent 调用方法

Answer 2

您需要进行以下两项更改：

1. 从 filter-bar.component.html 调用过滤器面板

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

2. 在 filter-bar.component.ts 中，您需要使用 this 访问服务引用。例如：

    this.filterPanelService.someMethod();