如何在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

如果你想让路由器处理这个，不要使用模板中的组件。使用路由器插座。此示例使用 Material 组件中的制表符。请将其更改为您的 UI 具体信息。您还需要将 JournalExtendedComponent 的子路由路径更改为 journal/details/:id

skeleton.component.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>

skeleton.component.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]);
  }
}

菜单-item.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'
    }
  ];

如何在Angular中组织路由？

How to organize routing in Angular?

angular

angular6

angular8