Angular中如何組織路由？

Question

我有組件SkeletonComponent里面有標簽：

<div class="tabs">
   <div class="tab" *ngIf="showTab(1)"><app-journal></app-journal></div>
   <div class="tab" *ngIf="showTab(2)"><app-journal-extended></app-journal-extended></div>
</div>

因此，存在按條件激活選項卡的機制。 它被放置在父組件SkeletonComponent中。

現在我想添加路由，通過路由激活特定選項卡：

  { path: "skeleton", component: SkeletonComponent,  children: [
      {
    path: "journal",
    component: JournalComponent
  },
  {
    path: "journal/:id",
    component: JournalExtendedComponent
  }
  ]},

這是正確的方法嗎？

Answer 1

如果您想讓路由器處理此問題，請不要使用模板內的組件。 使用路由器插座。 此示例使用材料組件中的選項卡。 請將其更改為您的 UI 細節。 您還需要將 JournalExtendedComponent 的子路由路徑更改為journal/details/:id

骨架.組件.html

<nav mat-tab-nav-bar>
    <button mat-tab-link *ngFor="let item of menuItems" (click)="selectTab(item)" [active]="activeTabIndex == item.id">{{item.title}}</button>
</nav>
<router-outlet></router-outlet>

骨架組件.ts

export class JobsForTutorComponent {
  menuItems: MenuItem[] = [
    {
      id: 0,
      title: 'Tab Title 1',
      route: '/route-to-component',
    },
    {
      id: 1,
      title: 'Tab Title 2',
      route: '/route-to-other-component'
    }
  ];
  activeTabIndex: number;

  constructor(
    private router: Router,
    private route: ActivatedRoute) {
    const routedMenuItem = this.menuItems.find(menuItem => menuItem.route === this.router.url);
    if (routedMenuItem) {
      this.selectTab(routedMenuItem);
    } else {
      this.activeTabIndex = 0;
    }
  }

  selectTab(tabItem: MenuItem) {
    this.activeTabIndex = tabItem.id;
    this.router.navigate([tabItem.route]);
  }
}

菜單項.model.ts

export interface MenuItem {
    id?: number;
    title?: string;
    route?: string;
}

編輯：您的情況下的路由

{
    path: "journal",
    component: SkeletonComponent,
    children: [
      {
       path: "overview",
       component: JournalComponent
      },
      {
       path: "detail/:id",
       component: JournalExtendedComponent
      }
  ]
}

組件中的 menuItems 數組將是：

menuItems: MenuItem[] = [
    {
      id: 0,
      title: 'Overview',
      route: '/overview',
    },
    {
      id: 1,
      title: 'Details',
      route: '/detail'
    }
  ];