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

【问题标题】：How to refresh the current page using Angular 7?如何使用 Angular 7 刷新当前页面？
【发布时间】：2019-09-11 20:13:35
【问题描述】：

我浏览了很多链接：How to reload the current route with the angular 2 router，但我没有找到适合我的解决方案。

我有编辑界面，通过编辑界面我可以添加学生，当我成功添加学生后，我应该可以在同一个屏幕看到新添加的学生。如果我们能做到这一点，有什么办法吗？我正在使用 Angular 7。

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]);
}

【问题讨论】：

标签： angular7 angular7-router

【解决方案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>

【讨论】：

【解决方案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”

【讨论】：