时间戳

首页 > 解决方案 > 对 Angular 5 路线的怀疑

angular - 对 Angular 5 路线的怀疑

问题描述

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

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

我怎样才能实现一个好的路由系统？

标签： angularroutingangular5angular-router

解决方案

你需要把你的导航栏变成一个组件本身。

navbar.component.ts

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

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

navbar.component.html （你的导航栏 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>
<router-outlet></router-outlet>

我在这里有一个 Angular 5 种子项目：

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

推荐阅读