如何在Angular中调用同级组件方法? [英] How to call sibling component method in Angular?

问题描述

我有一个标头组件，该标头组件具有自动完成搜索功能，当用户搜索某些内容并从建议下拉列表中选择一项时，主体将相应地发生变化.在主体3中，存在根据三种不同情况显示的部分.这里的header和body是2个不同的组件，因此，如何在body中触发具有假逻辑和true变量的逻辑的函数.当用户从自动完成搜索下拉菜单中选择某项时.
我正在尝试通过服务方法进行交流.
标题代码

I have a header component which is having autocomplete search, when the user search something and select one item from the suggestions dropdown, the body will change accordingly. In body 3 sections are there which is showing based on three different conditions. Here header and body are 2 different components, Hence how to trigger the function in body which is having some logic along with false and true variables. when the user select something from the autocomplete search dropdown.
I am trying in a communication through service approach.
Header code

<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);
}

，然后尝试从主体组件中捕获事件，如下所示.但这不是触发身体成分.问题是什么
身体成分ts

and trying to catch the event from body component like this. But it is not triggering in body component. what is the issue
body component 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)
});

}

我无法从主体组件的服务中捕获事件.谁能帮我

I am unable to catch the event from service in body component. Can anyone please help me

参考: https://medium.com/dailyjs/3-ways-to-communication-ween-angular-components-a1e3f3304ecb

推荐答案

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

To call a child component method from a parent component you can use ViewChild.

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

In your Parent class you would import the child component

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

，然后使用类似的内容:

and then use something similar:

@ViewChild(ChildComponent) childComponent: ChildComponent;

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

Then you will have access to your children component methods and properties:

this.childComponent.myMethod()

或

this.parentComponentValue = childComponent.property

这篇关于如何在Angular中调用同级组件方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！