如何使用同一ts文件中的材質對話框從另一個組件清除表單數據？

Question

如何使用同一ts文件中的材質對話框從另一個組件清除表單數據？

這是我的.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: ''
}

}

Answer 1

將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
  }

}

順便說一句，只有當app-enter-user包括clear-confirmation-dialog時，

例如：

 enter-user.component.html:

....
<clear-confirmation-dialog></clear-confirmation-dialog>
....

您最好將@Optional()和@Host()裝飾器添加到enter_user_component

有關forwardRef的更多信息：

https://angular.io/api/core/forwardRef