如何在按钮中执行routerLink之前执行事件[重复]

Question

我正在尝试在角度 4 的 routerLink 之前执行一个事件。

我对页面最底部的按钮感兴趣。

<div >
<button class="btn btn-primary"
(click)="createTeacher()"
 routerLink ='/teacher'
 >Submit</button>
</div>

我想知道是否有办法确保 (click)="createTeacher()" 事件在 routerlink 移动页面之前发生，因此最近创建的内容将出现在该新列表中。

<form class="teacher">
  <div class="form-group">
      <label for="">Name</label>
      <input required [(ngModel)]=teacher.name name="name"
        #name="ngModel" 
        id ="name" 
        type="text" 
        class="form-control">
        <div class="alert alert-danger" 
          *ngIf="name.touched && !name.valid">
          Name is required
        </div>
      <label for="">About Me</label>
      <textarea [(ngModel)]=teacher.aboutMe name="about" 
        #name="ngModel"
        id="about" 
        cols="30" 
        rows="10" 
        class="form-control">
      </textarea>
      <label for="">Location</label>
      <input required [(ngModel)]=teacher.location name="loc"
      #name="ngModel"
      id="loc"
      type="text"
      class="form-control">
      <label for="">Email</label>
      <input required [(ngModel)]=teacher.email name="email"
      #name="ngModel"
      id="email"
      type="text"
      class="form-control">
      <label for="">Phone</label>
      <input required [(ngModel)]=teacher.phone name="phone"
      #name="ngModel"
      id="phone"
      type="text"
      class="form-control">
    </div>
    <div >
    <button class="btn btn-primary"
    (click)="createTeacher()"
     routerLink ='/teacher'
     >Submit</button>
    </div>
</form>

以下是我与 Html 关联的组件。

import { RouterModule } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import ITeacherModelAngular from '../Share/ITeacherModelAngular';
import { TeacherService } from '../teacher-service.service';
import TeacherModel from '../Share/TeacherModel';

@Component({
  selector: 'app-new-teach-form',
  templateUrl: './new-teach-form.component.html',
  styleUrls: ['./new-teach-form.component.css']
})
export class NewTeachFormComponent implements OnInit {
  teacher: TeacherModel;
  constructor(private service$: TeacherService) {
    this.teacher = new TeacherModel();
   }

  ngOnInit() {
  }

  createTeacher() {
    this.service$.createTeacher(this.teacher);
    this.service$.getTeacherIndex();
  }

}

任何帮助将不胜感激， 谢谢。

Answer 1

我认为事件 createTeacher() 将在 routerLink 执行之前触发，但如果您正在处理 this.service$.createTeacher(this.teacher) 中的 post 调用; 您可能在 post call 成功之前正在导航。 如果您不想在 post call 成功之前导航。您可以在 createTeacher() 方法中处理路线。

import { Router } from '@angular/router';

将其注入构造函数

constructor(private service$: TeacherService, private router: Router)

并在方法中使用 router.navigate();

createTeacher() {
    this.service$.createTeacher(this.teacher);
    this.service$.getTeacherIndex();
    // trigger the route only when createTeacher() is resolved.
    this.router.navigate(['/teacher']);
  }