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

问题描述

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

<select class="search-dropdown"><option value="1">All</option><option value="2">品牌</option><option value="3">分子</option></选择><app-auto-complete [mySearchData]="mySearchData" (onchange)="onchange($event)" (onsearchKey)="getOnsearchkey($event)"></app-auto-complete><i class="material-icons">搜索 </i>

正文代码

123
<div *ngIf="bbb">第333话

标题组件 ts

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

规划服务

@Output() 改变:EventEmitter= new EventEmitter();更改发生(值){this.change.emit(value);}

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

onChange(value){this.isSearchScreen = false;this.isPlanListScreen = true;this.isCreateScreen = false;console.log('值',值)this.myPlan.moleculeId = value.id;this.selectedCombination = new SelectedCombination(value.brand,value.name);this.planningService.getProductMapData(value.name).subscribe((data)=>{this.strengthANDPacks = 数据；},(错误)=>{控制台日志(错误)；});this.planningService.getAllPlans(value.id,false).subscribe((data)=>{this.allPlans = 数据；},(错误)=>{控制台日志(错误)；});}ngOnInit(){this.planningService.change.subscribe(value => {console.log('发生变化')this.onChange(值)});}

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

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

解决方案

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

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

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

然后使用类似的东西:

@ViewChild(ChildComponent) childComponent: ChildComponent;

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

this.childComponent.myMethod()

或

this.parentComponentValue = childComponent.property

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>

Body code

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

header component ts

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

planning service ts

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

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

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

解决方案

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

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()

or

this.parentComponentValue = childComponent.property

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