javascript - ngbNav bootstrap Angular 选项卡的路由设置

Question

被 ngbNav 用于在项目上实现标签 link to the doc

需要为选项卡添加路由，我使用了码头的示例，但我无法配置路由的操作。可能是什么原因？

routes: Routes = [
  {path: '', component: PostsComponent},
  {path: 'posts', component: PostsComponent},
  {path: 'posts/:id', component: PostComponent},
  {path: 'posts/:id#one', component: Tab1Component},
  {path: 'posts/:id#two', component: Tab2Component},
]

对于 "posts/:id#one"和 "posts/:id#two"路由，没有反应发生。

根本不适合使用router模块，我需要为路由添加resolver和guards的能力

链接到示例实现 https://stackblitz.com/github/dedn/ngbNavAngular

Answer 1

我通过收听路由子节点上的 url 更改很容易地解决了这个问题。
零件:

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

  @ViewChild(NgbNav, {static: true})
  ngbNav: NgbNav;

  links = [
    { title: 'Personal Details', route: 'personal' },
    { title: 'Identification', route: 'identification' },
    { title: 'Address', route: 'address' }
  ];

  constructor(public route: ActivatedRoute) { }

  ngOnInit(): void {
    // subscribe to child url segments
    this.route.firstChild.url.subscribe((url) => {
      // get url path
      const urlPath = url[url.length - 1]?.path;
      // select/set active tab
      this.ngbNav.select(urlPath);
    });
  }
}

组件html:

<div class="row">
  <div class="col-lg-2">
    <ul ngbNav class="nav-pills flex-column">
      <li [ngbNavItem]="link.route" *ngFor="let link of links">
        <a ngbNavLink [routerLink]="link.route">{{ link.title }}</a>
      </li>
    </ul>
  </div>
  <div class="col-lg-10">
    <router-outlet></router-outlet>
  </div>
</div>

路由器模块:

{
    path: 'creditcard',
    component: CreditCardComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'personal'
      },
      {
        path: 'personal',
        component: PersonalDetailsFormComponent
      },
      {
        path: 'identification',
        component: IdentificationFormComponent
      },
      {
        path: 'address',
        component: AddressFormComponent
      }
    ]
  }