Angular 带选项卡的同一页面上的角度片段导航

我有页面“设置”，在这里我使用标签导航到不同的部分，如“个人资料”、“背景”、“徽标”。。。我想使用fragment在设置中的特定部分（例如徽标）上的不同页面进行导航，并从一个部分导航到另一个部分

我正在使用数据切换选项卡引导

settings.component.ts

ngOnInit(): void {

    this.route.fragment.subscribe(s => {
      if (s) {
        const element: HTMLElement = document.querySelector("#" + s);
        console.log(element)
        if (element) { element.click() }
      }
    });
  }

settings.component.html

<ul class="nav nav-tabs nav-ul" role="tablist">
    <li class="nav-item">
      <a class="txt-color nav-link active" [routerLink]='"."' fragment='overview' data-toggle="tab" href="#overview">Settings Overview</a>
    </li>
    <li class="nav-item">
      <a class="txt-color nav-link" [routerLink]='"."' fragment='profile' data-toggle="tab" href="#profile">Profile</a>
    </li>
    <li class="nav-item">
      <a class="txt-color nav-link" [routerLink]='"."' fragment='backgrounds' data-toggle="tab" href="#backgrounds">Backgrounds</a>
    </li>
</ul>

<div id="overview" class="tab-pane fade"><br>
      <div class="white-bg">
        some data
      </div>
      <div>
          <a [routerLink]='"."' fragment="profile">Edit your profile</a>
      </div>
</div>
<div id="profile" class="tab-pane fade"><br>
      <div class="white-bg">
        some data
      </div>
</div>
<div id="backgrounds" class="tab-pane fade"><br>
      <div class="white-bg">
        backgrounds
      </div>
</div>

一些数据
编辑您的个人资料


一些数据


背景

url导航正在更改，但选项卡不起作用，它始终停留在第一部分。 我怎样才能解决这个问题