使用導航菜單angular 2設置路線

Question

我有一個選項卡菜單，並且在app.module.ts中設置了路由，但是我不確定如何在選項卡和路由之間進行適當的橋接。

這是我的標簽html：

<tabs>
    <tab [tabTitle]="'Home Page'">
    </tab>
    <tab tabTitle="Feedback"> </tab>
    <tab tabTitle="Background"> </tab>
    <tab tabTitle="What we do"> </tab>
</tabs>

我在app.module.ts中的路線：

const appRoutes: Routes = [
  { path: './app/homepage/homepage.component.html', component: AppComponent },
  { path: './app/feedback/feedback.component.html', component: FeedbackComponent },
  { path: './app/background/background.component.html', component: BackgroundComponent },
  { path: './app/whatwedo/whatwedo.component.html', component: WhatwedoComponent}
];

我需要執行哪些步驟才能將選項卡與正確的路線鏈接相鏈接。

Answer 1

請遵循此頁面上的示例https://material.angular.io/

這里

    <li *ngFor="let component of category.items">
      <a [routerLink]="['/components/component/', component.id]"
         routerLinkActive="docs-component-viewer-sidenav-item-
  selected">
        {{component.name}}
      </a>
    </li>

一個關鍵點是

[routerLink]="['/components/component/', component.id]"

ante路由器將如下所示

  {
    path: 'components',
    component: ComponentSidenav,
    children: [

    {path: 'components/:id', component: ComponentViewer},
    ],
   },

注意，父組件和子組件具有絕對路徑的組件將正常工作

Answer 2

在您的標簽中，您需要在lcick上提供鏈接，該鏈接將顯示路由器出口中被舔掉的組件。

確保在index.html中添加標簽<router-outlet></router-outlet> ，以便將路由組件加載到此處

以下是您的標簽導航

<tabs>
    <tab [tabTitle]="'Home Page'">
    </tab>
    <tab tabTitle="Feedback"><a [routerLink]="['./app/homepage/homepage.component.html]"
         routerLinkActive="css-class-for-active-link">
        Home
      </a></tab>
    <tab tabTitle="Background"> </tab>
    <tab tabTitle="What we do"> </tab>
</tabs>

然后單擊Home鏈接，它將在<router-outlet></router-outlet>標簽內加載home組件。