如何在Angular中调用兄弟组件方法？

Question

我有一个具有自动完成搜索功能的标题组件，当用户搜索某些内容并从建议下拉列表中选择一项时，正文将相应更改。在正文中，有 3 个部分根据三种不同的条件显示。这里 header 和 body 是 2 个不同的组件，因此如何触发 body 中的函数，该函数具有一些逻辑以及 false 和 true 变量。当用户从自动完成搜索下拉列表中选择某些内容时。
我正在尝试通过服务方式进行沟通。
标头代码

<div class="docs-example-viewer-body custom-search" *ngIf="showSearch">
  <select class="search-dropdown">
    <option value="1">All</option>
    <option value="2">Brand</option>
    <option value="3">Molecule</option>
  </select>
  <app-auto-complete [mySearchData]="mySearchData" (onchange)="onchange($event)" (onsearchKey)="getOnsearchkey($event)"></app-auto-complete>
  <i class="material-icons">search </i>
</div>

正文代码

<div *ngIf="aaa"> 123</div>
<div *ngIf="bbb"> 333</div>

标头组件 ts

onChange(value) {
  this.planningService.changeOccured(value);
}

规划服务ts

@Output() change: EventEmitter<any> = new EventEmitter();
changeOccured(value) {
  this.change.emit(value);
}

并尝试像这样从 body 组件中捕获事件。但它不会在身体组件中触发。有什么问题
body 组件 ts

onChange(value){
this.isSearchScreen = false;
this.isPlanListScreen = true;
this.isCreateScreen = false;
console.log('value',value)
this.myPlan.moleculeId = value.id;
this.selectedCombination = new SelectedCombination(value.brand,value.name);
this.planningService.getProductMapData(value.name).subscribe((data)=>{
  this.strengthANdPacks = data;
},(error)=>{
  console.log(error);
});
this.planningService.getAllPlans(value.id,false).subscribe((data)=>{
  this.allPlans = data;

},(error)=>{
  console.log(error);
});
}

ngOnInit(){
this.planningService.change.subscribe(value => {
  console.log('change occured')
 this.onChange(value)
});

}

我无法从正文组件中的服务中捕获事件。谁能帮帮我

参考：https://medium.com/dailyjs/3-ways-to-communicate-between-angular-components-a1e3f3304ecb

Answer 1

要从父组件调用子组件方法，您可以使用 ViewChild。

在您的 Parent 类中，您将导入子组件

import { ChildComponent } from './child-component.ts';

然后使用类似的东西：

@ViewChild(ChildComponent) childComponent: ChildComponent;

然后您将可以访问您的子组件方法和属性：

this.childComponent.myMethod()

或

this.parentComponentValue = childComponent.property