[轉]玩轉Angular2(4)--製做左側自動定位菜單
本文轉自：https://godbasin.github.io/2017/06/02/angular2-free-4-create-sidebar/css
由於項目緣由又玩上了Angular2(v4.0+)，《玩轉Angular2》系列用於探索一些靈活或者新的用法。
本文記錄製做左側菜單，並使用路由自動定位的過程。
html
調整配置
上一篇有些配置不是很合適，故這裏咱們先進行調整。node
全局注入jQuery
上篇咱們是這樣注入jQuery的：jquery
|
1
2
|
// jquery
window['$'] = window['jQuery'] = require('./assets/js/jquery.min.js');
|
這樣的全局注入其實可能會致使一些問題（不知道是否是配置不正確，致使本騷年的其餘jQuery插件失效），因此咱們仍是用webpack來注入。
首先安裝jQuery的依賴：webpack
|
1
|
npm install jquery --save
|
而後在webpack的插件配置plugins中添加：git
|
1
2
3
4
5
6
|
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
|
就能夠挪掉上面不夠優雅的注入方式了。github
開啓source-map
以前咱們的webpack配置中也添加了devtool: 'source-map'，可是這個須要配合source-map-loader才能生效：web
|
1
|
npm install -D source-map-loader
|
而後在webpack中添加loader：npm
|
1
2
3
4
5
6
7
8
9
10
11
|
rules: [
{
test: /\.js$/,
use: ["source-map-loader"],
enforce: "pre",
exclude: [
path.join(__dirname,
'node_modules', '@angular/compiler'),
path.join(__dirname,
'node_modules', 'rxjs')
]
}
]
|
這裏咱們須要排除@angular/compiler以及rxjs，可能還有其餘一些依賴，否則會有webpack的warning。詳細也能夠查看相似的issue-Warnings displayed by webpack when using source-map-loader。redux
壓縮代碼
webpack自帶了一個壓縮插件UglifyJsPlugin，咱們添加如下配置就能夠生效：
|
1
2
3
4
5
6
7
|
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
|
壓縮後的代碼體積大大減少，但會消耗必定的編譯速度，故通常打包到生產環境纔會使用。
分離代碼
若是說咱們須要分離其餘的代碼，像一些依賴的代碼，或者是css代碼，也能夠經過配置實現。
- 抽離依賴
vender.js文件
|
1
2
3
4
5
6
7
|
new CommonsChunkPlugin({
name: 'vendors',
filename: 'vendors.js',
minChunks: function(module) {
return isExternal(module);
}
})
|
關於isExternal()函數，用了很簡單的方式進行：
|
1
2
3
4
5
6
7
|
function isExternal(module) {
var userRequest = module.userRequest;
if (typeof userRequest !== 'string') {
return false;
}
return userRequest.indexOf('node_modules') >= 0; // 是否位於node_modules裏
}
|
- 將樣式從js中抽出，生成單獨的
.css樣式文件。即把因此的css打包合併：
|
1
2
3
|
new ExtractTextPlugin('style.css', {
allChunks: true // 提取全部的chunk（默認只提取initial chunk，而上面CommonsChunkPlugin已經把部分抽離了）
})
|
這些你們下來能夠配置，本騷年就不在項目這使用了。
建立左側菜單
添加配置文件
這裏咱們爲了方便拓展，使用配置的方式來自定義菜單，這樣每次咱們須要修改的時候只須要調整配置文件就行了：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// sidebar.config.ts
export const menus = [{
icon: 'fa-home', // icon用於儲存菜單對應的圖標
text:
'頁面管理', // text用於儲存該菜單顯示名稱
childMenus: [{
link: '/home/page-setting', // link用於設定該菜單跳轉路由
text:
'頁面配置' // text用於儲存該菜單顯示名稱
}, {
link: '/home/page-rebuild',
text: '頁面重現'
}]
}, {
icon: 'fa-cubes',
text: '使用說明',
link: '/home/page-handbook'
}];
|
這裏暫時限定咱們最多爲二級菜單，跟以前搭建管理項目的方式一致。
添加html文件
這裏咱們能夠遍歷配置文件生成菜單：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<div class="col-md-3 left_col menu_fixed">
<div class="left_col scroll-view">
<!-- 其餘省略，重點在下面 -->
<!-- sidebar menu -->
<div class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<!-- 其餘省略，重點在下面 -->
<ul class="nav side-menu metismenu" id="sidebar-menu">
<li class="topper-menu" *ngFor="let menu of menus;" [ngClass]="menu.link && isActive(menu.link) ? 'active' : ''">
<a *ngIf="menu.link" [routerLink]="menu.link"><i class="fa" [ngClass]="menu.icon"></i> {{menu.text}}</a>
<a *ngIf="!menu.link" class="has-arrow"><i class="fa" [ngClass]="menu.icon"></i> {{menu.text}}</a>
<ul class="nav child_menu slide">
<li *ngFor="let childMenu of menu.childMenus;" class="slide-item" routerLinkActive="current-page">
<a [routerLink]="childMenu.link">{{ childMenu.text }}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
</div>
</div>
|
這裏能夠看到，咱們使用*ngFor來進行遍歷，而後咱們大體能夠獲得咱們的component須要如下功能：
[routerLink]： 連接跳轉routerLinkActive： 路由激活時樣式isChildMenuActived： 判斷該菜單下是否有子菜單的路由處於激活狀態
這裏咱們須要注意的是：
- 使用angular自帶的經常使用指令，像
*ngFor、ngClass等，須要在註冊@NgModule時引入CommonModule。 - 使用angular裏面路由經常使用指令，像
[routerLink]、routerLinkActive等，須要在註冊@NgModule時引入RouterModule。 - 使用angular裏面表單經常使用指令，像
[(ngModel)]等，須要在註冊@NgModule時引入FormModule。
像咱們的HomeModule：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { HomeRoutes } from './home.routes';
import { HomeComponent } from './home.component';
import { SidebarComponent } from './sidebar/sidebar.component';
@NgModule({
declarations: [
HomeComponent,
SidebarComponent
],
imports: [
FormsModule,
CommonModule,
RouterModule.forChild(HomeRoutes)
],
providers: []
})
export class HomeModule { }
|
添加component
組件使用了簡單的jQuey插件metisMenu，詳細說明請參考文檔，這裏咱們只須要知道調用$().metisMenu()的時候，如有<li class="active">則自動將該<li>設置爲激活形式，此時咱們在路由跳轉結束的時候就能夠獲取對應激活路由而後初始化菜單狀態了。
咱們直接在代碼中說明吧：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
import {Component, ElementRef} from '@angular/core';
import {ActivatedRoute, Router, NavigationEnd} from '@angular/router';
import {menus} from './sidebar.config';
import 'rxjs/Rx';
@Component({
selector: 'home-sidebar',
templateUrl: './sidebar.component.html',
})
export class SidebarComponent {
menus: any[] = menus;
constructor(private route: ActivatedRoute, private router: Router, el: ElementRef) {
this.router.events.subscribe(event => {
// 判斷路由結束
if (event instanceof NavigationEnd) {
const $menu = $(el.nativeElement).find('#sidebar-menu');
this.menus.forEach((menu, index) => {
if (this.isChildMenuActived(menu)) {
// 將被激活的路由對應的li添加「active」的class
$menu.find(
'li.topper-menu').eq(index).addClass('active');
}
});
// 初始化菜單狀態
$menu.metisMenu();
}
});
}
// 判斷路由是否激活狀態
isActive(url: string): boolean {
return this.router.isActive(url, false);
}
// 判斷菜單是否有子路由處於激活狀態
isChildMenuActived(menu: any): boolean {
let hasOneActive = false;
if (menu.childMenus) {
// 遍歷子路由看是否被激活
menu.childMenus.forEach(
child => {
hasOneActive = hasOneActive ||
this.isActive(child.link);
});
}
return hasOneActive;
}
}
|
在Angular2-release版本里，通常路由的狀態是經過事件監聽獲取的：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 使用`ActivatedRoute`的API獲取路由信息。
import { ActivatedRoute } from '@angular/router';
@Component({
...
// 略
})
export class SidebarComponent {
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params
.subscribe(
(params) => {
this.id = parseInt(params['id']); // 獲取params
...
// 其他代碼
});
}
...
// 其他代碼
}
|
這裏咱們也可使用filter()來過濾監聽咱們想要的事件：
|
1
2
|
// 監聽導航事件變動完畢
router.events.filter(
event => event instanceof NavigationEnd).subscribe(event => {});
|
更多有關路由的咱們上節也說過，能夠點擊回顧《玩轉Angular2(3)–啓用路由和添加靜態資源》。
最終效果圖：
結束語
這節主要講了一些基礎環境配置的調整，以及製做路由自動定位左側菜單的過程，主要涉及的可能仍是路由相關。
看菜單列表的內容，你們猜猜本騷年接下來想要作什麼？就不告訴你，哈哈。
此處查看項目代碼
此處查看頁面效果
查看Github有更多內容噢：https://github.com/godbasin
相關文章
- 1. 繼承LinearLayout自定義左側菜單
- 2. 左側菜單
- 3. Axure8.0 製作左側動態菜單欄
- 4. Android學習之左側滑動菜單
- 5. 左側菜單 html+css
- 6. iview 更新左側菜單
- 7. layer.tree 左側菜單懸浮 樣式 自定義 實現
- 8. 聯動菜單（左右側菜單）實現【微信小程序】
- 9. 轉載 - - - iOS10、11自定義左滑菜單項背景圖片
- 10. idea選中文件時左側菜單自動定位到文件所在位置
- 更多相關文章...
- • ionic 側欄菜單 - ionic 教程
- • XSLT - 轉換 - XSLT 教程
- • RxJava操作符（十）自定義操作符
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
