Angular 角度2中的自定义侧导航

我想在angular 2中创建一个自定义sidenav（不使用angular材质设计）。如何做到这一点？ 有没有办法在指令内部定义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%');
    }
}

自

。。。

---

我不想使用

div

。看起来一团糟

这更像是在Angular2中所做的

@指令({
选择器：“可覆盖”，
主持人:{
“[style.height.%]”：“100”，
“[style.width.%]”：“100”，
“[style.transition.s]”：“0.5”，
}
})
出口类保险{
@主机绑定（'style.margin top.%'））
marginTop：数字；
开（）{
此值为0.marginTop=0；
}
关闭（）{
此参数为0.marginTop=100；
}
}

或

@指令({
选择器：“可覆盖”，
风格：[`
：主持人{
身高：100%；
宽度：100%；
过渡：0.5s；
}`],
}
})
出口类保险{
@主机绑定（'style.margin top.%'））
marginTop：数字；
开（）{
此值为0.marginTop=0；
}
关闭（）{
此参数为0.marginTop=100；
}
}

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