时间戳

首页 > 解决方案 > Angular 5 & .NET Core 2.0 - 路由器导航冻结网站

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

问题描述

我正在学习 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>

零件

  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
  }

应用程序路由模块

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 {
}

结算服务

  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 的网络选项卡的屏幕截图

chrome 网络选项卡

标签： angularangular2-routingangular5angular-routing

解决方案

解决方案是将 data-dismiss="modal" 添加到您的删除按钮中，如下所示；

 <button id="closeButtonId" type="button" class="btn btn-secondary"  data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary" (click)="deleteSettle()" data-dismiss="modal">Delete</button>

但是如果你想确保删除模式只有在删除请求完成并成功后才关闭，那么你必须修改 logicAfterSettleDelete() 方法。

 private logicAfterSettleDelete() {
console.log(`Settle with id: ${this.settle.id} deleted!`);
 document.getElementById('closeButtonId').click()
this.router.navigate([``]); // after this redirection page freeze

}

整个本质是在导航之前关闭模态

推荐阅读