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>

成分</ P>

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

Answer 2

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

}

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

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

2 个答案: