Question

我已经能够使用ng-sidebar和this和this示例的帮助来创建侧边栏。我遇到的问题是我不知道如何在单个页面应用程序上使用带有此库的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

每件事都在这里说明：solved

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

使用ng-sidebar作为sidenav

1 个答案: