Angular4 组件之间添加分割线

公共方法：`

changeWidth(event, ele, leftEle, rightEle, contentEle, isListPage){
        ele = ele.nativeElement;
        leftEle = leftEle.nativeElement;
        rightEle = rightEle.nativeElement;
        contentEle = contentEle.nativeElement;

        const disX = (event || window.event).clientX;
        ele.left = ele.offsetLeft;
        document.onmousemove = () =>{
            let iT = ele.left + ((window.event || event).clientX - disX);
            const e = event || window.event;
            const tarnameb=e.target || e.srcElement;
            const maxT = contentEle.clientWight - ele.offsetWidth;
            let leftWidth;
            ele.style.margin = 0;
            iT < 0 && (iT = 0);
            iT > maxT && (iT = maxT);

            leftWidth = contentEle.clientWidth - iT;
            if(isListPage) {
                leftWidth = contentEle.clientWidth - iT - 10;
            }
            ele.style.left = leftEle.style.width = iT + "px";
            rightEle.style.width = leftWidth + "px";
            return false
        };

        document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
            ele.releaseCapture && ele.releaseCapture()
        };

        ele.setCapture && ele.setCapture();

        return false
    }

`

html代码`

<div style="position:relative" #contentEle>
                <div #treeEle></div>
                <div #drapDiv  (mousedown)="onDrapMousedown($event)" [ngStyle]="{'height': height}"></div>
                <div #tableEle></div>
                </div>

`

angular代码：`

import { Component, ViewChild, ElementRef } from '@angular/core';
@ViewChild("drapDiv")
    private drapDiv: ElementRef;

    @ViewChild("treeEle")
    private treeEle: ElementRef;

    @ViewChild("tableEle")
    private tableEle: ElementRef;

    @ViewChild("contentEle")
    private contentEle: ElementRef;
 onDrapMousedown(event) {
        this.changeWidth(event, this.drapDiv, this.treeEle, this.tableEle, this.contentEle, true);
    }

`