角度路由片段替换完整的URL路径

I'm trying to utilize the angular 9 route fragment for nav tabs using ng-bootstrap and referred this ng-bootstrap documentation. The problem is on adding click tab it's replacing the whole URL path e.g. path should be like https://www.mypleaks.com/home#International after clicking tab but it is forming https://www.mypleaks.com/#International, it is completely replacing /home path

的HTML

<ul ngbNav [activeId]="route.fragment | async" class="nav-tabs justify-content-center container-lg">
    <li [ngbNavItem]="flatTab.name" *ngFor="let flatTab of flatTabs">
        <a ngbNavLink routerLink="." [fragment]="flatTab.name"
        [class.active]="flatTab.active" (click)="activateTab(flatTab)">{{ flatTab.name }}</a>
    </li>
</ul>

零件

import { Component, OnInit } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { ActivatedRoute } from '@angular/router';

import { TabService } from '../../services/tab.service';
import { FlatTab } from '../../modals/flat/flat-tab';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.scss']
})
export class TabsComponent implements OnInit, AfterViewInit {

  public flatTabs : FlatTab[];
  constructor(public tabService: TabService, public route: ActivatedRoute) { }

  ngOnInit(): void {
    this.tabService.getTabs().subscribe(resp => {
      this.flatTabs = { ...resp.body }.flatTabs;
      this.route.fragment.subscribe((name: string)=>{
        let isActiveSet = false;
        this.flatTabs.forEach(flatTab => {
          if(name == flatTab.name){
            flatTab.active = true;
          }else{
            flatTab.active = false;
          }
          if (!name && !isActiveSet) {
            isActiveSet = true;
            flatTab.active = true;
          }else if (!name && isActiveSet) {
            flatTab.active = false;
          }
        });
      });
    });
  }
}

FlatTab

export class FlatTab {
    tabId: number;
    name: string;
    active: boolean;
}

提前致谢