Question

这是组件模板

template: `<h1 class = "dragStyle" [drag] = "true">DRAG THIS ELEMENT</h1>`,
styles : [`
    .dragStyle{
        margin : 12px;
    }`
]

这是[drag]属性指令的构造函数 -

constructor(
    private _el: ElementRef, 
    private _renderer : Renderer,
    @Attribute('class') type : string) {
        console.log(type);

对于某些计算，我需要访问与dragStyle类关联的margin属性的值。

Answer 1

我不知道你要做什么并将css类对象注入构造函数＆＃39;是可能的。但是，由于您只需要计算的css属性，为什么不使用getComputedStyle()？

在您的示例中，

@Directive({
  selector:'[drag]' 
})
export class DragDirective{
  @Input() drag:boolean;
  constructor(
    private _el: ElementRef, 
    private _renderer : Renderer,
    @Attribute('class') type : string) {
        console.log(type);
  }
  ngOnInit(){
    let margin = getComputedStyle(this._el.nativeElement).getPropertyValue('margin');
    console.log(margin);
  }
}

这是plunker

如何从与同一元素关联的属性指令访问类css属性

1 个答案: