angular2中实现百度百科导航栏的效果

这是在百度百科中的效果

Paste_Image.png

下面我们开始在ng2中实现
1.用一套数据绑定两个区域：主页面和导航栏

Paste_Image.png

html代码：

  

    

    
{{item.moduleTitle}}
    

  
  


    
  

component:

import { Component, OnInit, Input, ElementRef } from '@angular/core';

@Component({
    selector: 'teaching-plan-unit',
    styleUrls: ['teaching-plan.component.css'],
    templateUrl: 'teaching-plan-unit.component.html'
})
export class TeachingPlanUnitComponent implements OnInit {
    _state: string;     // preview预览；edit编辑
    _atomicTeachPlan: any;
    activeId: string = '1';
    @Input()
    set state(state) {
        this._state = state;
    }
    @Input()
    set atomicTeachPlan(atomicTeachPlan) {
        this._atomicTeachPlan = atomicTeachPlan;
    }
    constructor(private el: ElementRef) { }

    ngOnInit() { }

    onTab(module) {
        let id = 'module_' + module.id;
        this.setActive(module.id);
        let moduleDom = this.el.nativeElement.children[0].lastElementChild.children;
        for (let i = 0; i < moduleDom.length; i++) {
            if (moduleDom[i].id === id) {
                document.body.scrollTop = moduleDom[i].offsetTop;
            }
        }
    }

    setActive(index: string) {
        this.activeId = index;
    }

    onTabChange(top) {
        let moduleDom = this.el.nativeElement.children[0].lastElementChild.children;
        for (let i = 1; i < moduleDom.length; i++) {
            if (moduleDom[i].offsetTop > top && moduleDom[i-1].offsetTop <= top) {
                let index = moduleDom[i-1].id.split('module_')[1];
                this.setActive(index);
            }
        }
    }
}

directive

import { Directive, HostListener, ElementRef, Input, EventEmitter, Output } from '@angular/core';

@Directive({
    selector: '[appScroll]'
})
export class ScrollDirective {
    @Output() onTabChange: EventEmitter = new EventEmitter();

    constructor(private el: ElementRef) {}

    @HostListener('mousewheel', ['$event']) onMouseWheelChrome() {
        this.onTabChange.emit(document.body.scrollTop);
    }
}

分两个部分：
1.点击导航栏定位到相应的模块
（1）点击设置导航栏激活状态，获取相应模块的id值（或者data-top获取滚动距离）
（2）ElementRef定位到相应的模块，操作Dom，将滚动条移动到相应的位置去

2.监听鼠标滚动判断导航栏激活状态
（1）指令中HostListener获取滚动事件
（2）传回滚动条距离
（3）导航栏根据滚动距离判断激活状态

关于ng2监听鼠标事件，可参考：
http://www.tuicool.com/articles/eii2yaB

import { Directive, Output, HostListener, EventEmitter } from '@angular/core';
@Directive({ selector: '[mouseWheel]' })export class MouseWheelDirective { 
  @Output() mouseWheelUp = new EventEmitter(); 
  @Output() mouseWheelDown = new EventEmitter(); 
  @HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) { this.mouseWheelFunc(event); } 
  @HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) { this.mouseWheelFunc(event); }
  @HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) { this.mouseWheelFunc(event); }
  mouseWheelFunc(event: any) {
    var event = window.event || event; // old IE support var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); 
    if(delta > 0) { this.mouseWheelUp.emit(event); } 
    else if(delta < 0) { this.mouseWheelDown.emit(event); } // for IE event.
    returnValue = false; // for Chrome and Firefox if(event.preventDefault) { event.preventDefault(); } }}