Angular2 - 指令选择器上的 ngclass

Question

我正在使用最新的 Angular 2 beta (45?) 并尝试将 ngClass 附加到指令选择器标识的元素。用于切换类的变量不会更新。

我怀疑这是两件事之一：

1. Angular2 不能那样工作，所以这是一个范围问题；如果我 在指令选择器元素中放置一个 div 并附加 ngClass 到那个 div，它可以工作。不过我不想那样做。
2. 因为我正在对窗口事件做出反应。我试过使用观察者， setTimeout 黑客和区域。不走运。

有没有办法做我想做的事？不再是这样了吗？

从内存中编写的示例代码，因为我目前无法访问它：

@Directive({
    selector: "nav",
    templateUrl: "templates/nav.html"
});

export class NavComponent {
    isOpen:Boolean = false;

    onScroll(e) {
        this.isOpen = true;
    }

    window.onscroll = (e) => this.onScroll.call(this);  // .call seemed necessary, because otherwise the scope of 'this' changed to window instead of the directive  
}

以下操作无效：

index.html

<nav [ngClass]="{open: isOpen}"></nav>

模板/nav.html

<a href="#">whatever</a>
...
<a href="#">whatever 2</a>

以下确实有效：

index.html

<nav></nav>

模板/nav.html

<div [ngClass]="{open: isOpen}">
    <a href="#">whatever</a>
    ...
    <a href="#">whatever 2</a>
</div>

Answer 1

isOpen 在

<nav [ngClass]="{open: isOpen}"></nav>

指<nav>的父组件，即模板中包含<nav>的组件。

如果要在指令主机上设置类，请使用

@Directive({
    selector: "nav",
    templateUrl: "templates/nav.html",
    host: {'[class.open]': 'isOpen'}
});
export class NavComponent {
    isOpen:Boolean = false;

    onScroll(e) {
        this.isOpen = true;
    }
}

Answer 2

除了 Günter 的回答之外，使用 host listener 而不是将事件处理程序分配给 window.onscroll。然后 Angular 更改检测将运行并在您滚动时实际更新 CSS 类。 （否则，需要在视图更新之前发生一些其他事件。）

@Component({
    selector: "nav",
    template: `<a href="#">whatever</a>
      <a href="#">whatever 2</a>`,
    host: {
      '(window:scroll)': 'onScroll($event)',   //  <<------
      '[class.open]': 'isOpen'
    }
})
export class NavComponent {
  isOpen:Boolean = false;
  onScroll(e) {
    this.isOpen = true;
  }
}

@Component({
  selector: 'my-app',
  template: `<nav></nav>
    <div *ngFor="#row of dummyArray; #i = index">row {{i}}</div>`,
  styles: ['.open { background-color: lightblue }']
  directives: [NavComponent]
})
export class AppComponent {
  dummyArray = new Array(100);
  constructor() { console.clear(); }
}

Plunker