要实现Angular 9和可折叠的Bootstrap菜单,可以使用Angular的Router模块和Bootstrap的Collapse组件。下面是一个示例解决方案:
首先,安装Bootstrap和jQuery库:
npm install bootstrap jquery
然后,在angular.json
文件中将Bootstrap和jQuery添加到styles
和scripts
数组中:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
接下来,创建一个名为navbar
的组件,用于实现导航栏和可折叠的菜单:
ng generate component navbar
在navbar.component.html
文件中,添加Bootstrap的导航栏和折叠菜单代码:
在navbar.component.ts
文件中,导入Router模块,并在构造函数中添加Router对象:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
constructor(private router: Router) { }
}
最后,在app.component.html
文件中引入navbar
组件:
这样就完成了Angular 9和可折叠的Bootstrap菜单的实现。