javascript - routerlink = "functionName()"页面加载后立即调用

Question

我的组件的 html 是这样的:

<div id="summary">
  <div *ngFor="let question of thisSurvey">
    <div>
      <span class="badge">#{{question.questionNumber}}</span>
      <span>{{question.questionText}}</span>
    </div>
    <p>Your answer: {{question.questionAnswer}}</p>
  </div>
</div>
<br/>

<button class="btn btn-danger yes-no-btn" routerLink="/survey">Go Back</button>
<button class="btn btn-primary" [routerLink]="submitSurvey()" routerLinkActive="active">Finish</button> <!-- Issue here -->

当页面加载时，submitSurvey 立即被调用，然后不断被调用。这是提交调查:

  // Send the answers back to the api for processing
  submitSurvey() {
    // Make sure everything is answered
    const allOKClientSide: boolean = this.surveyService.checkEntireForm(this.thisSurvey);

    if (allOKClientSide) {
       if (this.surveyService.checkFormOnline(this.thisSurvey).subscribe()) {
        return '/placeOne';
       }
    }

    return '/placeTwo';
  }

该方法立即开始访问服务并继续，直到我终止服务器。如何防止在单击按钮之前调用该函数？我是 Angular 的新手，可能只是犯了一个菜鸟错误，如果是这样，您也可以指出这一点。提前致谢。

Answer 1

[routerLink] 是一个输入，请注意 []。因此，Angular 将在每个更改检测周期立即解决该问题，以满足模板的要求。您想要使用 (click) 这是一个输出，请注意 () 并且仅在单击按钮时调用。然后，不要在 submitSurvey() 函数上返回 url，而是调用 router.navigate() (首先注入(inject)路由器。)

html

<button class="btn btn-primary" (click)="submitSurvey()" routerLinkActive="active">Finish</button>

ts

constructor(private router: Router) { }

public submitSurvey(): void {
  // Make sure everything is answered
  const allOKClientSide: boolean = this.surveyService.checkEntireForm(this.thisSurvey);

  if (allOKClientSide) {
    if (this.surveyService.checkFormOnline(this.thisSurvey).subscribe()) {
      this.router.navigateByUrl('/placeOne');
      return;
    }
  }

  this.router.navigateByUrl('/placeTwo');
}