Question

如何在Angular2中获取css属性而不是类？

我有以下代码：

app.component.ts：

import { Component, HostBinding } from '@angular/core';

@Component({
    selector: 'body',
    templateUrl: 'views/masterpage.html'
})
export class AppComponent {
    @HostBinding('attr.class') hostClass = "sticky-header sidebar-open"; // Works, but not what i want
    @HostBinding('style.position') hostPosition:string; // Does not work

    sidebarToggle() {
        this.sidebarCollapsed = !this.sidebarCollapsed;
        this.hostClass = (this.sidebarCollapsed ? "sidebar-collapsed" : "sticky-header sidebar-open");

        // Here I wanna check what is the 'position' property of my host (body). 
        // See "style-responsive.css"
    }
}

样式responsive.css：

@media screen and (max-width: 1024px) {
    body {
        position: relative;
    }
}

因此，正如您所看到的，只要用户缩小窗口，页面就会添加相对于正文的位置。

我只想在Angular组件中获取此信息。如果窗口大于1024px，则应定义hostPosition，如果小于此值，则应定义为“relative”。

如何实现？

Answer 1

@HostBinding()不是为了阅读，而是为了写作。

您可以使用

@HostBinding('style.position') hostPosition:string;

获取hostPosition分配给元素style.position的值，但不来读取当前style.posotion。

constructor(private elRef:ElementRef) {
  console.log(elRef.nativeElement.offsetLeft);
  console.log(elRef.nativeElement.offsetTop);
}

Answer 2

不确定这是否有效，但值得尝试：

@HostListener('window:resize', ['$event'])
      handleClick(event: Event) {
       //Do something when resize window
      }

当您调整窗口大小并获取当前信息时，应该通知您的身体位置

绑定到主机的css属性（而不是类）

2 个答案: