[英]How can I clear form data from another component using material dialog in the same ts file?
How can I clear form data from another component using material dialog in the same ts file? 如何使用同一ts文件中的材质对话框从另一个组件清除表单数据?
Here is my .ts file 这是我的.ts文件
@Component({
selector: 'clear-confirmation-dialog',
templateUrl: './clear-confirmation-dialog.html'
})
export class ClearConfimationDialog {
clearForm(){
/** FUNCTION TO CLEAR FORM DATA **/
}
}
@Component({
selector: 'app-enter-user',
templateUrl: './enter-user.component.html',
styleUrls: ['./enter-user.component.scss']
})
export class EnterUserComponent implements OnInit {
/** THIS IS THE FORM DATA **/
user = {
name: '',
address: ''
}
}
Inject the EnterUserComponent
to the ClearConfimationDialog
将EnterUserComponent
注入到ClearConfimationDialog
@Component({
selector: 'clear-confirmation-dialog',
templateUrl: './clear-confirmation-dialog.html'
})
export class ClearConfimationDialog {
enter_user_component:EnterUserComponent;
clearForm(){
/** FUNCTION TO CLEAR FORM DATA **/
this.enter_user_component.clearForm()
}
constructor(@Inject(forwardRef(() => EnterUserComponent)) enter_user_component:EnterUserComponent){
this.enter_user_component = enter_user_component
}
}
By the way, only when the app-enter-user
include the clear-confirmation-dialog
will work 顺便说一句,只有当app-enter-user
包括clear-confirmation-dialog
时,
for example: 例如:
enter-user.component.html:
....
<clear-confirmation-dialog></clear-confirmation-dialog>
....
You better add @Optional()
& @Host()
decorator to enter_user_component 您最好将@Optional()
和@Host()
装饰器添加到enter_user_component
More about forwardRef: 有关forwardRef的更多信息:
https://angular.io/api/core/forwardRef https://angular.io/api/core/forwardRef
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.