gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 02:22:00 25 4
gpt4 key购买 nike

我正在使用父组件和子组件。在子组件中,我使用搜索框。我需要随时按需获取搜索框值。如何获得这个?

子组件 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);
});

无法获取输入值

最佳答案

您的解决方案的版本之一如下(组件 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 很简单。

关于javascript - 如何随时获取父组件中的子组件输入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49118459/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com