angular 2 中的自定义 sidenav

Question

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

@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。看起来一团糟！

Answer 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

angular 2 中的自定义 sidenav

Custom sidenav in angular 2

directive

custom-component

typescript

angular