如何保持Angular Route导航固定? Angular Route重定向到新页面

时间:2018-02-19 12:49:44

标签: angular angular-router

我正在关注本教程。我需要保持导航栏的固定和neviagte像this示例。

我只有两个链接。这是在一页内。

这是我尝试过的。

<nav>
    <a routerLink="/title" routerLinkActive="active">Titler</a>
    <a routerLink="/dist" routerLinkActive="active">Dist</a>
</nav>

<router-outlet></router-outlet>

HttpClientModule,
RouterModule.forRoot(Inner, {
    enableTracing: true
  }),
RouterModule.forChild([ HOME_ROUTE ]),

和Route.ts是

import { Route, Routes } from '@angular/router';

export const HOME_ROUTE: Route = {
    path: '',
    component: HomeComponent,
    data: {
        authorities: [],
        pageTitle: 'home.title'
    }
};

export const Inner: Routes = [
    {path: 'title', component: TComponent},
    {path: 'dist', component: DComponent}
];

如果我点击喜欢重定向到新页面。但是就像那个例子我想在每个页面中保留导航并显示内容。我做错了什么?

2 个答案:

答案 0 :(得分:4)

如果我理解你的问题或纠正我

请创建一个组件ex。 header.component并在标头组件中添加nav标签 然后你可以写

<header-component></header-component>
<router-outlet></router-outlet>

您可以将其添加到app.component.ts 它将在所有页面中提供

答案 1 :(得分:3)

你的问题不够明确,here is a stackblitz of the simplest routing example I can imagine。 如果示例没有回答您的问题,请随时更新并在您的问题中使用它。 (不要害怕stackblitz,它只是一个在线IDE ^ _ ^))