0

我在我的 Angular 项目中集成了一个 sb-admin 模板。因此，我将其划分为侧边栏、页脚等模块。我面临折叠侧边栏的问题。如果我使用模块插入侧边栏，则菜单折叠不起作用，如果我将其<nav>直接移动到<body>index.html ，它会起作用！

这是我的代码 -

sidebar.component.html -

<nav class="navbar navbar-expand-lg navbar-light sakon-header fixed-top" id="mainNav">
    <a class="navbar-brand" href="">
        <img style="height:30px" src="assets/images/sakon-logo-horizontal.png" />
    </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive"
        aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav navbar-sidenav sakon-sidebar" id="exampleAccordion">
        </ul>
    </div>
</nav>
<router-outlet></router-outlet>

index.html -

<body>
    <app-root>
    </app-root>
    <!-- if nav moved here, it works -->
</body>

所以，我希望它与 Sidebar 模块一起使用。

更新：参考的项目结构。-

- app
    - pages
    - theme
        - components
            - sidebar
                - sidebar.component.css
                - sidebar.component.html
                - sidebar.component.ts
    - app.component.css
    - app.component.html
    - app.component.ts
    - app.module.ts
- index.html
4

1 回答 1

1

为此，您需要添加 app.routing.ts

 - app
    - pages
    - theme
        - components
            - sidebar
                - sidebar.component.css
                - sidebar.component.html
                - sidebar.component.ts
    - app.component.css
    - app.component.html
    - app.component.ts
    - app.module.ts
    - app.routing.ts
 - index.html

在你的app.routing.ts你需要添加这样的东西。

export const AppRoutes: Routes = [{
    path: '',
  component: SidebarComponent,
  children: [
  {path: 'ROUTING PATH', loadChildren: 'COMPONENT_PATH'}]}]

在你app.component.ts应该像

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
于 2018-03-07T09:31:06.527 回答