Sidemenu 折叠无法使用 Angular 模块
Posted
技术标签:
【中文标题】Sidemenu 折叠无法使用 Angular 模块【英文标题】：Sidemenu collapse not working using Angular module 【发布时间】：2018-03-07 09:03:39 【问题描述】：我在我的 Angular 项目中集成了一个 sb-admin 模板。因此，我将其划分为侧边栏、页脚等模块。我面临折叠侧边栏的问题。 如果我使用模块插入侧边栏，menu collapse 不起作用，如果我将 <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
【问题讨论】：
你能分享一下你的项目结构吗 我刚刚更新了，请在上面查看！ 你的 app.component.ts 是否包含类似@Component( selector: 'app-root', template: '<router-outlet></router-outlet>', )'的内容
是的，是一样的！
没错！我的布局一直是固定的，但只有内容会根据路线发生变化。
【参考方案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>'
)
【讨论】：
我已经这样做了 - path: '', component: SecureComponent, canActivate: [AuthGuard], children: SECURE_ROUTES
RouterModule.forRoot(AppRoutes) 添加到您的app.module.ts
是的，添加了。
仍然无法确定您可能出错的地方，目前，我正在研究相同的工作方式。以上是关于Sidemenu 折叠无法使用 Angular 模块的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Angular 6 和 bootstrap 3.3.7 创建带有复选框列表的可折叠/可扩展/树结构
React Native Navigation v2 sideMenu 无法导航到屏幕
ionic 2 + angular 2 - 选项卡 + 侧边菜单