Question

我有一个具有自动完成搜索的标题组件，当用户搜索某些内容并从建议下拉列表中选择一个项目时，正文将相应更改。在身体3中，有基于三种不同条件的部分。这里标题和正文是2个不同的组件，因此如何触发正文中的函数，它具有一些逻辑以及错误和真实的变量。当用户从自动填充搜索下拉列表中选择某些内容时。
我正在尝试通过服务方式进行沟通。
标题代码

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

正文代码

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

标题组件ts

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

计划服务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)
});

}

并尝试从像这样的body组件中捕获事件。但它并没有触发身体成分。问题是什么？ 正文部分ts

{{1}}

我无法从body组件中的服务中捕获事件。任何人都可以帮助我

参考：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;

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

childComponent.myMethod()

或

this.parentComponentValue = childComponent.property

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

1 个答案: