替换完整URL路径的Angular路由片段。

Question

我想用ng-bootstrap为导航标签页使用angular 9路由片段，并参考了以下内容 ng-bootstrap文档. 问题是在添加点击标签时，它取代了整个URL路径，例如，路径应该是这样的 https:/www.mypleaks.comhome#International 点击标签后，但它正在形成 https:/www.mypleaks.com#International它完全取代了家乡的路径

查看链接 和 编辑链接

超文本标记语言

<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

你的app-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.comeditdesh-angular-fragment-x3kj4w。