Угловая 4-сторонняя навигация и панель инструментов с просмотром контента, основанным на элементе навигации

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 и боковая панель ap будут компонентами, представляющими те две части вашего приложения, которые вы нарисовали в своем примере красным и синим. В вашем компоненте ap-sidebar в html-шаблоне у вас должны быть ссылки, по которым вы можете щелкать с помощью ссылки, указывающей на nav1, nav2 или nav3. Например:

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

И это все! У вас есть все, чтобы закончить свой пример! Надеюсь, это поможет!