当按钮单击父组件时，如何将数据从子组件传递给父组件

Question

当用户单击父组件中存在的提交按钮时，我需要将输入的值从子组件传递给父组件。

<<p>childComp模板/strong>

<input 
type="password" 
[(ngModel)]="userPasswordForm.inputId"
class="mr-password-field k-textbox" 
/>

childComp TS file

export class PasswordInputComponent{
constructor() { }

@Output() inputValue = new EventEmitter<string>();
userPasswordForm:any={'input':''};
emitValue(value: string) {
this.inputValue.emit(value);
}
}

父组件模板

<child-component (inputValue)="" > </child-component>
<button (click)="getValueFromChild()"> </button>

父组件TS文件

tempUserFormPasswords:any=[];
.
.
.
getValueFromChild(receivedVal){
this.tempUserFormPasswords.push(receivedVal);
}

如果按钮存在于子组件中，则很容易删除它。但是在这种情况下，这个值应该在父组件中的按钮被点击时传递!

Answer 1

For single ChildComponent:使用ViewChild

对于多个ChildComponent使用:ViewChildren

父组件TS文件

单子组件:

tempUserFormPasswords:any=[];
@ViewChild(ChildComponent) child: ChildComponent;
.
.
.
getValueFromChild(receivedVal){
var data = child.getData();
this.tempUserFormPasswords.push(data);
}

多子组件:

tempUserFormPasswords:any=[];
@ViewChildren(ChildComponent) child: ChildComponent;
@ViewChildren(ChildComponent) children: QueryList<ChildComponent>;
.
.
.
getValueFromChild(receivedVal){
let data;
children.forEach(child => (data = this.updateData(child.data));
this.tempUserFormPasswords.push(data);
}

Answer 2

在服务文件中创建一个BehaviorSubject

@Injectable()
export class dataService {
data: BehaviorSubject<any> = new BehaviorSubject<any>(null);
public setData(data: any){
this.data.next(data);
}
public getData(): Observable<any> {
return this.data.asObservable();
}
}

你需要订阅子组件

中的数据PasswordInputComponent

export class PasswordInputComponent{
constructor(private service: dataService) { 
this.service.getData().subscribe((data) => {
//Emit the event here
this.inputValue.emit(value);
});
}

@Output() inputValue = new EventEmitter<string>();
userPasswordForm:any={'input':''};
emitValue(value: string) {
this.inputValue.emit(value);
}
}

ParentComponent.ts

tempUserFormPasswords:any=[];
.
.
.
constructor(private service: dataService) { }
getValueFromChild(receivedVal){
this.service.setData('');
this.tempUserFormPasswords.push(receivedVal);
}

当一个按钮在父组件上被点击时，我们正在设置数据行为主题，当一个新的值被添加到子组件中时，它将自动订阅。所以，在那个时候我们需要发出一个事件。

我想这会对你有帮助。

Answer 3

阅读angular中的输入和输出装饰器!
document: sharing-data。
示例:Examples

Answer 4

可以使用ViewChild就像@Raz Ronen在另一个回答中所说的那样。但请记住，根据Angular版本的不同，你可能需要等待AfterViewInit生命周期钩子被执行后才能与子组件交互(或者子组件因为没有初始化而不可用)。

也可以使用BehaviorSubject，就像@Msk Satheesh刚刚回答的那样，这也很好。但是对于这样一个简单的用例来说，它可能被认为有点过头了。(这是我们通常在组件之间没有关系时所做的，例如一个组件不是另一个组件的子组件)

我的建议是我认为最简单的(再一次，他们的答案无论如何都不坏);它基本上与@Msk Satheesh相同(但在引擎盖下)，只是多了一点Angular风格:Output + EventEmitter:

父组件:

import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Message: {{message}}
<app-child (messageEvent)="receiveMessage($event)"></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() { }
message:string;
receiveMessage($event) {
this.message = $event
}
}

儿童组件:

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<button (click)="sendMessage()">Send Message</button>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
message: string = "a string from child component"
@Output() messageEvent = new EventEmitter<string>();
constructor() { }
sendMessage() {
this.messageEvent.emit(this.message)
}
}

在代码中，父组件将始终订阅子组件输出的messageEvent，并且它将在子组件发出后运行该函数(消息函数)。用Angular来处理这个问题有一个好处，那就是我们可以确保我们的应用不会有任何内存泄漏(比如取消订阅丢失)。当正在监听的组件(已订阅的父组件)被销毁时，Angular会自动取消订阅，以避免潜在的内存泄漏。