如何随时获取父组件中的子组件输入元素

Posted 2023-03-13

【中文标题】如何随时获取父组件中的子组件输入元素

【英文标题】：How to get child component input element in parent at any time

【发布时间】：2018-08-13 13:55:49

【问题描述】：

我正在使用父子组件。在子组件中，我使用搜索框。我需要随时按需获取搜索框值。这个怎么弄？

子组件 html - GridViewComponent

<input id="successFilter" name='filterInput' type="text" (keyup)="searchSuccess($event)">

父组件 ts

@ViewChild(GridviewComponent) grdView: GridviewComponent;

在构造函数之前写上一行

this.grdView.filterInput.subscribe(data => 
  console.log(data);
);

无法获取输入值

【问题讨论】：

发布您的代码，向我们展示您的尝试。

Parent 将输入传递给 Child 组件Child 将输出事件发送给 Parent，我希望你的意思是这样的

【参考方案1】：

您的解决方案的版本之一如下（组件 A - 父组件，组件 B - 子组件）：

在组件 B 中： 在 html 文件中：

<input ... [(ngModel)]="inputValue" ...>

在componentB.ts文件中：

@Input() needAnswer : ReplaySubject<any>(1);
@Output() hereYourAnswer = new EventEmmiter<any>();
inputValue: string;
private subscription: Subscription;


...

ngOnInit() 
  this.subscription = this.needAnswer.subscribe( giveMeAnswer => this.hereYourAnswer.emit(this.inputValue));


...
ngOnDestroy() 
  this.subscription.unsubscribe();

在组件A中，html：

<component-b [needAnswer]='needAnswer' (hereYourAnswer)='getAnswer(event$)'></component-b>

在componentA.ts文件中：

...
needAnswer = new ReplaySubject<any>(1);

...
getInputDataFromComponentB() 
  this.needAnswer.next('give me answer!!! please)');

...

getAnswer(answer) 
  console.log(answer, 'here i am');


...

使用 RXJS 很简单。

【讨论】：

我知道你已经添加了...，但是你应该提到在onDestroy生命周期钩子中取消订阅needAnswer-Subject 的部分，否则，OP 可以轻松地为自己构建一个内存泄漏。

我为你修正了一个小错误，你不小心使用了类型作为值，也只是使用Subscription作为类型而不是ISubscription。