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

中加载主组件

使用导航菜单angular 2设置路线

2 个答案: