Question

我有组件about.component.ts

onSubmit(redirectAfter) {

    if (this.form.invalid) {
        this.notificationService.error(this.translateService.instant('fail'));
        return;
    }
....

现在在about.html.ts中：

<user [form]="this.form"></user>

现在在带有标签用户<user>的组件中：

@Component({
selector: 'user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {
   @Input() form?: FormGroup;
   validateAndClose() {
       this.form.onSubmit(false);
   }

所以我想在UserComponent中调用AboutComponent中表单的提交。我尝试过这种方法，但是没有用。你有主意吗？提前谢谢。

Answer 1

您可以尝试@Output（）来自UserComponent的自定义事件，这将触发AboutComponent中的提交

@Output() public submitEvent = new EventEmitter();

然后在AboutComponent模板中：

<user-component (submitEvent)="submit()"></user-component>

Answer 2

一个简单的解决方案是使用事件。您可以在子组件中创建输出EventEmitter。父母对此事件有反应。

<user-component (formSubmit)="parentSubmitFunc()"></user-component>

。

@Component({
  selector: 'user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {
   @Output() formSubmit = new EventEmitter<any>(); // <--

   validateAndClose() {
       [...]
       formsubmit.emit(anypayload); // <--
   }

文档为here

Answer 3

还有另一种无需使用Output事件发射器即可访问父组件方法的方法。通过使用@Host。

export class UserComponent implements OnInit {
  @Input() form?: FormGroup;
  parentCmp: AboutComponent;
  constructor(@Host parentCmp: AboutComponent){
    this.parentCmp = parentCmp;
  }

  validateAndClose() {
    this.parentCmp.onSubmit()
  }

限制：父方法不应为私有

Demo using @Host

从组件外部提交表单

3 个答案: