使用导航菜单设置路线角度 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]"

安特路由器将看起来像这样

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

请注意，父组件和子组件具有绝对路径的组件，它将起作用

Answer 2

在您的选项卡中，您需要在 lcick 上提供链接，它将显示路由器插座中被舔过的组件。

确保在索引中添加标记<router-outlet></router-outlet>.html以便将路由组件加载到索引中

下面是您的选项卡导航

<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>

然后单击主页链接，它将在标签内加载主页<router-outlet></router-outlet>