Question

我在我的角度项目中集成了sb-admin模板。所以，我把它分成了侧边栏，页脚等模块。我正面临着折叠边栏的问题。 如果我使用模块插入侧边栏，菜单折叠不起作用，如果我将<nav>直接移至 index.html中的<body> ，它有效！

这是我的代码 -

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>

所以，我希望它使用补充工具栏模块。

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

- 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

Answer 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>'
})

Sidemenu崩溃无法使用Angular模块

1 个答案: