Angular 路由器 - 路由到奇怪的路由 "?mat-radio-group-0=true"

Question

我的 HTML 模板中有这个关闭按钮，它会在组件中触发 close() 函数： HTML 模板：

       <div>
          <label id="radio-group-label">Please specify: </label>
          <mat-radio-group
            fxLayout="row"
            aria-labelledby="radio-group-label"
            class="radio-group"
            formControlName="flWholeDay"
          >
            <mat-radio-button [checked]="wholeDayLeave" value="true"
              >Whole day</mat-radio-button
            >
            <mat-radio-button [checked]="!wholeDayLeave" value="false"
              >Part day</mat-radio-button
            >
          </mat-radio-group>
        </div>

HTML 按钮：

<button mat-raised-button fxLayoutAlign="center center" color="accent" (click)="close()">Close</button>

组件：

 close() {
    this.router.navigate(['/something']);
  }

问题是按下按钮时它会路由到 http://localhost:4200/something?mat-radio-group-0=true 这奇怪的事情发生在哪里？

Answer 1

button 元素有一个默认为 "submit" 的 type 属性。 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)

将 type="button" 添加到您的按钮。

<button type="button" mat-raised-button fxLayoutAlign="center center" color="accent" (click)="close()">Close</button>