Angular2：指令变量变化，更新元素

Question

我目前正在尝试将类提供给包含我所有应用程序的包装器，我通常发现这对于提供某些状态非常方便，例如 header 固定时或菜单的被打开等

所以在阅读 angular 的一些文档后，我可能应该使用 'Directive'。现在我把这一切都设置好了，它看起来像这样：

constructor(private router:Router, @Inject(DOCUMENT) private document:Document, el:ElementRef, renderer:Renderer) {
    this.setClasses(el, renderer);
}

setClasses(el:ElementRef, renderer:Renderer) {
    renderer.setElementClass(el.nativeElement, 'header-fixed', this.headerFixed);
}

@HostListener("window:scroll", [])onWindowScroll() {
    let number = this.document.body.scrollTop;

    if (number > 100) {
        this.headerFixed = true;
    } else if (this.headerFixed && number < 10) {
        this.headerFixed = false;
    }
}

现在一切正常，但如您所见，我正在根据滚动位置切换 headerFixed 变量。但是我当然可以再次运行函数 setClasses() 并且它会工作但是无论如何 subscribe/watch 变量并在更改时自动更新？

或者是否有更好的方法来实现我正在尝试做的事情？

Answer 1

您可以使用 @HostBinding 如：

@HostBinding('class.header-fixed') get myClass() { 
  return someCondition; 
}

Plunker Example

Angular2：指令变量变化，更新元素

Angular2: Directive variable change, update element

javascript

directive

typescript

angular