要使用Angular CLI创建导航栏并使其能够折叠,您可以使用以下步骤:
npm install -g @angular/cli
ng new my-app
cd my-app
ng generate component navbar
navbar.component.html
文件,并使用以下代码添加一个基本的导航栏结构:
navbar.component.ts
文件中,添加以下代码来处理导航栏的折叠和展开功能:import { Component } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
isCollapsed = true;
toggleNavbar() {
this.isCollapsed = !this.isCollapsed;
}
}
app.component.html
文件中,使用以下代码将新创建的导航栏组件添加到应用程序的布局中:
ng serve
现在,您的应用程序将具有一个带有折叠功能的导航栏。点击“Toggle”按钮将导航栏展开或折叠。