這是在百度百科中的效果

Paste_Image.png

下面我們開始在ng2中實(shí)現(xiàn)
1.用一套數(shù)據(jù)綁定兩個(gè)區(qū)域：主頁面和導(dǎo)航欄

Paste_Image.png

html代碼：

<main class="teaching_plan_unit">
<!--導(dǎo)航欄-->
  <section class="navigate">
    <p class="top"><span></span></p>
    <p class="text" (click)="onTab(item)" [ngClass]="{active: activeId==item.id}" *ngFor="let item of _atomicTeachPlan.oTeachPlanModuleList">{{item.moduleTitle}}</p>
    <p class="end"><span></span></p>
  </section>
  <section appScroll (onTabChange)="onTabChange($event)">
<!--主頁面-->
    <examination-question-module *ngFor="let item of _atomicTeachPlan?.oTeachPlanModuleList" [id]="'module_'+item.id" [teachPlanModule]="item" [state]="_state"></examination-question-module>
  </section>
</main>

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預(yù)覽漾月；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<number> = new EventEmitter<number>();

    constructor(private el: ElementRef) {}

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

分兩個(gè)部分：
1.點(diǎn)擊導(dǎo)航欄定位到相應(yīng)的模塊
（1）點(diǎn)擊設(shè)置導(dǎo)航欄激活狀態(tài)病梢，獲取相應(yīng)模塊的id值（或者data-top獲取滾動(dòng)距離）
（2）ElementRef定位到相應(yīng)的模塊，操作Dom，將滾動(dòng)條移動(dòng)到相應(yīng)的位置去

2.監(jiān)聽鼠標(biāo)滾動(dòng)判斷導(dǎo)航欄激活狀態(tài)
（1）指令中HostListener獲取滾動(dòng)事件
（2）傳回滾動(dòng)條距離
（3）導(dǎo)航欄根據(jù)滾動(dòng)距離判斷激活狀態(tài)

關(guān)于ng2監(jiān)聽鼠標(biāo)事件蜓陌，可參考：
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(); } }}