ng alain 侧边栏怎么添加
时间: 2024-05-16 11:17:27 浏览: 15
要在一个 Angular 项目中添加 Alain 的侧边栏,可以按照以下步骤进行:
1. 首先,安装 `@delon/abc` 和 `@delon/theme` 依赖项。可以使用以下命令安装:
```
npm install @delon/abc @delon/theme --save
```
2. 在 `app.module.ts` 文件中导入 `DelonModule` 和 `AlainThemeModule` 模块:
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DelonModule } from '@delon/abc';
import { AlainThemeModule } from '@delon/theme';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, DelonModule, AlainThemeModule.forRoot()],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
3. 在 `app.component.ts` 文件中添加一个侧边栏组件:
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<layout>
<sider-menu></sider-menu>
<layout-content>
<router-outlet></router-outlet>
</layout-content>
</layout>
`,
})
export class AppComponent {}
```
在这个例子中,使用了 `sider-menu` 组件来显示侧边栏。
4. 最后,在 `app.component.ts` 文件中添加一些菜单项:
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<layout>
<sider-menu [menus]="menus"></sider-menu>
<layout-content>
<router-outlet></router-outlet>
</layout-content>
</layout>
`,
})
export class AppComponent {
menus = [
{
text: 'Dashboard',
link: '/',
icon: 'anticon anticon-dashboard',
},
{
text: 'Users',
link: '/users',
icon: 'anticon anticon-user',
},
{
text: 'Settings',
link: '/settings',
icon: 'anticon anticon-setting',
},
];
}
```
在这个例子中,为侧边栏添加了三个菜单项:`Dashboard`、`Users` 和 `Settings`。
这样,就可以在 Angular 项目中使用 Alain 的侧边栏了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)