angular 2中的自定义sidenav答案

【问题标题】：Custom sidenav in angular 2angular 2中的自定义sidenav
【发布时间】：2017-04-11 07:12:05
【问题描述】：

我想在 Angular 2 中创建一个自定义 sidenav（不使用 Angular 材料设计）。这个怎么做？有没有办法在指令中定义 CSS。 using 指令是一个很好的理想吗？

@Directive({
    selector: 'may-cover'
})

export class MayCover {
    constructor(
        private elRef: ElementRef,
        private renderer: Renderer
    ) {
        this.renderer.setElementStyle(this.elementRef, 'height', '100%');
        this.renderer.setElementStyle(this.elementRef, 'width', '100%');
        this.renderer.setElementStyle(this.elementRef, 'transition', '0.5s');
    }

    open() {
        this.renderer.setElementStyle(this.elementRef, 'margin-top', '0%');
    }

    close() {
        this.renderer.setElementStyle(this.elementRef, 'margin-top', '-100%');
    }
}

自从

<may-cover #sidenav>...</may-cover>

我不想使用div。看起来一团糟！

【问题讨论】：

标签： angular typescript directive custom-component

【解决方案1】：

这更像是在 Angular2 中这样做

@Directive({
    selector: 'may-cover',
    host: {
      '[style.height.%]': '100',
      '[style.width.%]': '100',
      '[style.transition.s]': '0.5',
    }
})
export class MayCover {

  @HostBinding('style.margin-top.%')
  marginTop:number;

  open() {
    this.marginTop = 0;
  }

  close() {
    this.marginTop = 100;
  }
}

或

@Directive({
    selector: 'may-cover',
    styles: [`
      :host {
        height: 100%;
        width: 100%;
        transition:0.5s;
       }`],
    }
})
export class MayCover {

  @HostBinding('style.margin-top.%')
  marginTop:number;

  open() {
    this.marginTop = 0;
  }

  close() {
    this.marginTop = 100;
  }
}

Plunker example

【讨论】：