используя ng-sidebar в качестве sidenav

Question

Мне удалось создать боковую панель с ng-sidebar и помощью this и this sample.У меня проблема в том, что я понятия не имею, как использовать routerlink с этой библиотекой в ​​одностраничном приложении.Ng-sidebar-content - это место, где должна отображаться главная страница, но я не могу отобразить другой компонент.`

<!-- A sidebar -->
<ng-sidebar [(opened)]="_opened" position="left" mode="push" closeOnClickOutside="true">
  <ul>
    <button (click)="_toggleOpened()" class="mt-2">Toggle sidebar</button>
    <li [routerLink]="['/main']">Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
  </ul>
</ng-sidebar>

<!-- Page content -->
<div ng-sidebar-content>
  <app-home></app-home>

</div>

`

Answer 1

Здесь объясняется все: https://angular.io/guide/router

Импорт RouterModule, определите свои маршруты в app.module.ts.

И используйте router-outlet, например:

<ng-sidebar [(opened)]="_opened" position="left" mode="push" closeOnClickOutside="true">
  <ul>
    <button (click)="_toggleOpened()" class="mt-2">Toggle sidebar</button>
    <li [routerLink]="['/main']">Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
  </ul>
</ng-sidebar>

<!-- Page content -->
<router-outlet></router-outlet>