Question

我经历了许多链接：How to reload the current route with the angular 2 router，但是我没有找到可行的解决方案。

我有编辑屏幕，通过“编辑屏幕”可以添加学生，当我成功添加学生时，我应该能够在同一屏幕上看到新添加的学生。有什么办法可以做到吗？我正在使用Angular7。

addStudents(): void {
    this.student.studentId = this.studentId;
    console.log(this.student);
    this.studentService.saveStudent(this.student).subscribe(response => {
      console.log(response);
      this.memberResponse = response;
    });
    this.ngOnInit();
    this.router.navigate(['/student-edit', this.studentList]);
}

Answer 1

如果要使用相同的屏幕，那么为什么需要更改路线？或重新加载页面？

您只能通过布尔值来做到

您的ts文件

export class myComponent {
    isEditMode = true;

    addStudents(): void {
        this.student.studentId = this.studentId;
        this.studentService.saveStudent(this.student).subscribe(response => {
            this.memberResponse = response;
            isEditMode = false;
        });
    }
}

现在是HTML

<div *ngIf="isEditMode">
    // HTML for edit screen
</div>
<div *ngIf="!isEditMode">
   // HTML for view students screen
</div>

Answer 2

HTML

<div *ngIf="edit">
    // edit student form 
</div>
<div *ngIf="!edit">
   // show all student table
</div>

TS文件

openEditForm() { this.edit = true }  // When user want to edit or add student


// Called when user clicks save on Edit Form
onSaveButtonClick() {
  // Logic to save or edit student using subscription
}

1。成功执行保存或编辑学生后，将API调用给GetAllStudents

成功执行GetAllStudents时，将其设置为“ this.edit = false”

如何使用Angular 7刷新当前页面？

2 个答案: