在移动视图中折叠导航栏 - 点击链接（Angular 8）

Question

当 select 折叠导航栏中的任何链接我希望它自动关闭并在没有导航栏的情况下刷新内容但发生的是整个页面刷新

HTML 代码：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item ">
              <a class="nav-link" (click)="closeCollapse()" [routerLink]="['/link-one']">
                link one
              </a>
            </li>
            <li class="nav-item ">
              <a class="nav-link" (click)="closeCollapse()" [routerLink]="['/link-two']">
                link two
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" (click)="closeCollapse()" [routerLink]="['/link-three']">
                link three
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" (click)="closeCollapse()" [routerLink]="['/link-four']">
                link four
              </a>
            </li>
          </ul>
      </div>

TS代码：

navDropdown = this.el.nativeElement.querySelector('#navbarNavDropdown');
closeCollapse(){
this.navDropdown.classList.remove('show');
}

我尝试将data-toggle="collapse" data-target=".navbar-collapse.show"添加到每个导航链接但折叠关闭而不转到所选链接