Angular Swiper导航无法正常唤醒

Question

HTML：

 <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
          <div class="col-12 col-sm-12 d-flex text-center ">
            <div class="col-4 col-sm-4" [routerLink]="['/user']">
              <button mat-mini-fab>
                <span>4</span>
              </button>
            </div>
            <div class="col-4 col-sm-4 px-0" [routerLink]="['/job']">
              <button mat-mini-fab>5</button>
            </div>
            <div class="col-4 col-sm-4 px-0" [routerLink]="['/contacts']">
              <button mat-mini-fab>6</button>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev "></div>
      <div class="swiper-button-next"></div>
      <mat-divider class="mt-1"></mat-divider>
    </div>

ts：

 ngAfterViewInit() {
    this.elementRef = new Swiper(this.elementRef.nativeElement.querySelector('.swiper-container'), {
    });
  }
  ngOnInit() {
    var mySwiper = new Swiper('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      loop: true,

      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
      },

      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // And if we need scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
  }

`enter image description here我已将Angular swiper npm用于角度项目。滑动/轮播的每个内容都有点击事件。向前/向后滚动时，单击事件不适用于内容。