ngbNav bootstrap Angular 选项卡的路由设置

Question

ngbNav 用于在项目上实现选项卡link to the doc

需要为tabs添加路由，我用了docks的例子，但是无法配置路由的运行。可能是什么原因？

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模块，我需要为路由添加resolvers和guards的能力

link 示例实现 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
      }
    ]
  }

Answer 2

如果你像我一样完全是新手并且想在

中使用绝对路由

组件模板

<div class="row">
  <div class="col-lg-2">
    <ul ngbNav [activeId}=selectedTab class="nav-pills flex-column">
      <li [ngbNavItem]="'customers'" *ngIF="!!allowedCustomers">
        <a ngbNavLink [routerLink]="'customers'">{{ link.title }}</a>
      </li>
      <li [ngbNavItem]="'orders'" *ngIF="!!allowedOrders">
        <a ngbNavLink [routerLink]="'orders'">{{ link.title }}</a>
      </li>
    </ul>
  </div>
  <div class="col-lg-10">
    <router-outlet></router-outlet>
  </div>
</div>

您 might/have 在双引号内使用单引号使其正常工作。这只花了我 2-3 小时左右的时间，因为在 ngb 的文档和示例中它没有这样显示。

ngbNav bootstrap Angular 选项卡的路由设置

Routing setup for ngbNav bootstrap Angular tabs

javascript

typescript

angular-routing

angular