Angular Router 按钮未触发提交事件答案

【问题标题】：Angular Router button not triggering submit eventAngular Router 按钮未触发提交事件
【发布时间】：2018-11-14 06:30:07
【问题描述】：

我面临的问题是这段代码中的按钮没有触发提交事件，但是如果我删除路由器链接，它就会开始触发事件 应该正常。我猜路由发生在事件触发之前。

如何更改我的代码，使其运行 onSubmit() 函数，然后开始路由。

我有一个简单的角码：

HTML

<form (submit)="onSubmit(theForm)" #homeForm='ngForm' ngControl="homeForm">
  <button 
    mat-raised-button
    color="accent"
    routerLink="/form"
    routerLinkActive="active">
    Submit
  </button>
  <mat-card>
      <mat-checkbox>Check me!</mat-checkbox>
  </mat-card>
</form>

打字稿

import { Component, Output, Input, OnInit } from '@angular/core';
import {FormsModule, FormGroup,  NgForm, FormBuilder} from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  onSubmit(form: NgForm) {
    console.log('You submit to me?');
    console.log(form);

  }
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
  }
}

【问题讨论】：

标签： javascript angular typescript routing

【解决方案1】：

您可以在 onSubmit 处理程序中手动 route

进行以下更改

.ts

constructor(private fb: FormBuilder, private router : Router) { }

onSubmit(form: NgForm) {
    console.log('You submit to me?');
    console.log(form);
    this.router.navigate(['/forms']);

  }

同时从 .html 中删除您的 routerLink

【讨论】：

在你的ts中也导入路由器，import { Router } from '@angular/route'