Angular 5 & .NET Core 2.0 - роутер для навигации - PullRequest
Новая
       23

Angular 5 & .NET Core 2.0 - роутер для навигации

0 голосов
/ 24 мая 2018

Я изучаю 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
  }

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

plotService 

  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 console

снимок экрана с вкладки сети Chrome

chrome network tab

...