Angular環境においてSwiper.jsのhashNavigationのデモの動作確認ができない

Question

Angular環境においてSwiper.jsのhashNavigationを使って、ページ内遷移を行った際のIDによって表示されるスライドが変わるようにしたいのですが、下記リンクのSwiper.jsのデモページでの動作確認が取れませんでした。
https://codesandbox.io/s/t4htp?file=/src/app/app.component.ts:498-542

デモページの初期のコードでは、ページ遷移ボタンがないため、自分でコードに追加しました。
しかしながら、自分の理解が及ばないためか、想定通りに動かすことが叶いませんでした。
些細なことでも良いので、お力添えのほうよろしくお願い致します。

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { SwiperComponent } from "swiper/angular";

// import Swiper core and required modules
import SwiperCore, { Pagination, Navigation } from "swiper/core";

// install Swiper modules
SwiperCore.use([Pagination, Navigation]);

@Component({
  selector: "app-swiper-example",
  template: <a href="#slide1">slide1</a>
    <a href="#slide2">slide2</a>
    <a href="#slide3">slide3</a>
    <a href="#slide4">slide4</a>
    <a href="#slide5">slide5</a>
    <a href="#slide6">slide6</a>
    <a href="#slide7">slide7</a>
    <a href="#slide8">slide8</a>
    <a href="#slide9">slide9</a>
    <swiper
      [spaceBetween]="30"
      [hashNavigation]="{
        watchState: true,
        hashnav: true,
        replaceState: true,
        hashnavWatchState: true
      }"
      [pagination]="{
        clickable: true
      }"
      [navigation]="true"
      class="mySwiper"
    >
      <ng-template data-hash="slide1" id="slide1" swiperSlide
        >Slide 1</ng-template
      ><ng-template data-hash="slide2" id="slide2" swiperSlide
        >Slide 2</ng-template
      ><ng-template data-hash="slide3" id="slide3" swiperSlide
        >Slide 3</ng-template
      ><ng-template data-hash="slide4" id="slide4" swiperSlide
        >Slide 4</ng-template
      ><ng-template data-hash="slide5" swiperSlide>Slide 5</ng-template
      ><ng-template data-hash="slide6" swiperSlide>Slide 6</ng-template
      ><ng-template data-hash="slide7" swiperSlide>Slide 7</ng-template
      ><ng-template data-hash="slide8" swiperSlide>Slide 8</ng-template
      ><ng-template data-hash="slide9" swiperSlide>Slide 9</ng-template>
    </swiper>,
  styleUrls: ["./app.components.scss"],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {}