angular 路由片段替换完整的 URL 路径

Question

我正在尝试使用 ng-bootstrap 将 angular 9 路由片段用于导航选项卡并引用此 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，它完全取代了 /home 路径

stackblitz view link and stackblitz edit link

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;
}

提前致谢

Answer 1

您的应用-routing.module.ts 应该有以下代码：-

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'home'},
  {path: 'home', component: HomeComponent}
  ];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    initialNavigation: 'enabled'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

您的 home.component.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="home" [fragment]="flatTab.name"
         [class.active]="flatTab.active" (click)="activateTab(flatTab)">{{ flatTab.name }}</a>
    </li>
</ul>

下面的工作 stackblitz :-

https://stackblitz.com/edit/desh-angular-fragment-x3kj4w

angular 路由片段替换完整的 URL 路径

angular route fragment replacing complete URL path

angular-routing

angular

angular-router