Angular 4 Side导航和工具栏，其中包含基于单击的导航项的内容视图

Question

我希望有这样的页面，

请帮助我，我无法使用角度路由器找到解决方案

Answer 1

检查一下。首先你需要路由模块，就像这样，我们称之为app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';   
import { PageComponent } from './pages/pages.component';
import { Nav1Component} from './components/nav1.component';
import { Nav2Component} from './components/nav2.component';
import { Nav3Component} from './components/nav3.component';

const routes: Routes = [
    { path: '', component: PageComponent,
      children: [
            { path: 'nav1', component: Nav1Component},
            { path: 'nav2', component: Nav2Component},
            { path: 'nav3', component: Nav3Component}
];

@NgModule({
    imports: [RouterModule.forRoot(routes), NgbModule.forRoot()],
    exports: [RouterModule]
})
export class AppRoutingModule { }

然后你需要组件作为你的应用程序的模板组件，例如。在这里，您将放置所有子组件，如侧栏，工具栏和路由器插座，这将代表当您单击某个导航链接时将更改的应用程序的一部分！让我们称之为PageComponent。该组件的Html模板如下所示：

<div>
    <ap-toolbar></ap-toolbar> 
    <ap-sidebar></ap-sidebar>
    <div class="page-wrapper">
        <div class="container-fluid">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

ap-toolbar和ap-sidebar将是代表应用程序中您在示例中绘​​制为红色和蓝色的那两部分的组件。在您的ap-sidebar组件中，在html模板中，您必须拥有可以使用指向nav1，nav2或nav3的href单击的链接。例如：

<aside class="left-sidebar">
    <div>
         <nav class="sidebar-nav">
             <ul id="sidebarnav">
                 <li><a href="#" [routerLink]="/nav1">NAV 1</a></li>
                 <li><a href="#" [routerLink]="/nav2">NAV 2</a></li>
                 <li><a href="#" [routerLink]="/nav3">NAV 3</a></li>
             </ul>
         </nav>
    </div>
</aside>

就是这样！你有一切可以完成你的榜样！希望它有所帮助！