Question

我是Angular 5开发的新手，我对Angular 5中的路由有疑问。

我在app.component.ts中有<router-outlet></router-outlet>。在这里我加载了我的页面的登录系统，登录后，我有一个带有一些链接的仪表板视图。我想保持导航菜单并加载菜单下方的内容，但如果我向仪表板组件添加<router-outlet></router-outlet>，然后单击链接，该页面将更改组件并丢失菜单。< / p>

我如何实施一个好的路由系统？

Answer 1

对于可以使用不同的路由器插座，您可以在路由配置中使用children属性。

如果您有仪表板，则必须创建一个名为仪表板的模块和一个名为仪表板的组件以及仪表板模块的其他路径模块。

dashboard.module.ts
仪表板routing.module.ts
dashboard.component.ts
dashboard.component.html

控制板-routing.module.ts

const routes : Routes = [
   {
     path : '', component: DashboardComponent,
     children : [
        {path: 'path', component: Component },
        .....
     ]
   }
]

Dashboard.component.html

然后，DashboardComponent中的路径将在dashboard.component.html的router-outlet中加载，在这里您可以拥有一个静态内容菜单。

Answer 2

您需要将导航栏本身变成一个组件。

navbar.component.ts

import { Component        } from '@angular/core';
import { RouterLinkActive } from '@angular/router';

@Component
({
    selector    : 'navbar',
    templateUrl : './navbar.component.html'
})

navbar.component.html（您的navbar html在此处）

    <ul>
        <li routerLinkActive="active"><a routerLink="route1" >Route1      </a></li>
        <li routerLinkActive="active"><a routerLink="route2" >Route2      </a></li>
        <li routerLinkActive="active"><a routerLink="route3" >Route3      </a></li>  
   </ul>

然后将navbar组件嵌入路由器出口上方：

<navbar></navbar>
<router-outlet></router-outlet>

我这里有一个有角的5种子项目：

https://github.com/oneinazillion/landing-page

关于Angular 5路线的疑问

2 个答案: