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立即被调用，然后不断被调用。这是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

{ "query": { "has_child" : { "type" : "<child_type>", "query" : { "term" : { "name" : "child_name" } } } } }是输入，请注意[routerLink]。因此，Angular会在每个变更检测周期内立即解决该问题，以满足模板的要求。您要使用[]作为输出，请注意(click)，并且仅在单击按钮时才会调用。然后，无需返回()函数上的url，而是调用router.navigate（）（首先注入路由器。）

html

submitSurvey()

ts

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

Answer 2

您希望单击按钮时调用您的方法。您可以使用(clicK)：

代替

[routerLink]="submitSurvey()"

做

(click)="submitSurvey()"

然后您在课堂上使用路由器进行导航：

constructor(private router: Router) {}

submitSurvey() {
    // ...
    this.router.navigate(['/placeOne']);
}

routerlink =“ functionName（）”在页面加载后立即调用

2 个答案: