当用户单击父组件中存在的提交按钮时，我需要将输入值从子组件传递到父组件。
childComp模板
<input
type="password"
[(ngModel)]="userPasswordForm.inputId"
class="mr-password-field k-textbox"
/>
childComp TS文件
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);
}
如果该按钮存在于子组件中，则很容易发出信号。但是在这种情况下，当单击父组件中的按钮时，应该传递该值！
对于单个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);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句