Angular 5＆.NET Core 2.0-路由器导航冻结网站

Question

我正在学习Angular 5并实现简单的应用程序（在后端方面，我正在使用.net core 2.0 Web API）。用户单击模式上的删除按钮后，我试图重定向到主页，正在进行重定向，但整个页面都冻结了。我不知道我在做什么错。

模板

<!-- Button trigger modal -->
      <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModalCenter">
        Delete settle
      </button>

      <!-- Modal -->
      <div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="deleteModalCenterTitle">Permanently delete settle "{{ settle.name }}"</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              Are you sure you want to delete this kitty and all its data?
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" (click)="deleteSettle()">Delete</button>
            </div>
          </div>
        </div>
      </div> 

component

  deleteSettle(): void {
    this.settleService
      .deleteSettle(this.settle.id)
      .subscribe(() => this.logicAfterSettleDelete())
  }

  private logicAfterSettleDelete() {
    console.log(`Settle with id: ${this.settle.id} deleted!`);

    this.router.navigate([``]); // after this redirection page freeze
  }

app-routing.module

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {CreateComponent} from "./create/create.component";
import {HomeComponent} from "./home/home.component";
import {SettleComponent} from "./settle/settle.component";
import {EditSettleComponent} from "./edit-settle/edit-settle.component";

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'create', component: CreateComponent},
  {path: 'blog', component: HomeComponent},
  {path: 'faq', component: HomeComponent},
  {path: 'settle/:id', component: SettleComponent},
  {path: 'edit/:id', component: EditSettleComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule {
}

settleService

  deleteSettle(id: number): Observable<number> {
    return this.http.delete<number>(`${this.settleUrl}/${id}`).pipe(
      tap(() => this.log('Settle deleted')),
      catchError(this.handleError<number>('DeleteSettle'))
    );
  }

Chrome控制台的屏幕截图

来自chrome的网络标签的屏幕截图

Answer 1

我发生了类似的事情，这就是我使用的解决方案

this.route.navigate([this.urlReditect]).then( result => {
            if (result) {
              location.reload();
            }
          } );