Angular 7 Маршрутизация и навигация не работают в IE 11

Question

В моем приложении Angular я реализовал маршрутизацию с помощью RouterModule. У меня есть три кнопки на странице, при нажатии на эту страницу происходит переход на другую страницу. Все работает нормально в Chrome, Firefox и Safari, но не работает в IE 11.

app.module.ts

...
const routes: Routes = [
  { path: 'world', component: WorldComponent },
  { path: 'india', component: IndiaComponent },
  { path:'state', component: StateComponent},
  { path: '**', component: IndiaComponent}
];

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

app.component. html

<nav>
    <button mat-raised-button class="mat-button">
      <a routerLink="/india" routerLinkActive="active">India's Dashboard</a>
    </button>
    <button mat-raised-button class="mat-button">
      <a routerLink="/state" routerLinkActive="active">Indian-State's Dashboard</a>
    </button>
    <button mat-button class="mat-button">
      <a routerLink="/world" routerLinkActive="active">World's Dashboard</a>
    </button>
  </nav>

Answer 1

Это известная проблема, если тег <a> находится внутри элементов button. Когда мы нажимаем кнопку в браузере IE, оно запускает событие нажатия кнопки вместо события нажатия тега <a>. Итак, маршрутизация не работает.

Чтобы решить эту проблему, вы можете попробовать использовать следующие методы:

Метод 1. Измените тег <button> на тег <div>.

  <div mat-raised-button class="mat-button">
    <a routerLink="/user" routerLinkActive="active">User Dashboard</a>
  </div>
  <div mat-raised-button class="mat-button">
    <a routerLink="/about" routerLinkActive="active">About Dashboard</a>
  </div>

Метод 2: Поместите тег <button> в тег <a>.

    <a routerLink="/user" routerLinkActive="active"><button mat-raised-button class="mat-button">User Dashboard</button></a>

    <a routerLink="/about" routerLinkActive="active"> <button mat-raised-button class="mat-button">About Dashboard</button></a>

Метод 3: при нажатии кнопки используйте Jquery, чтобы вызвать событие щелчка гиперссылки .