Angular2 - ngclass onディレクティブセレクタ

Question

最新のAngular 2 beta（45？）を使用していて、ディレクティブセレクタによって識別される要素にngClassをアタッチしようとしています。クラスを切り替えるために使用される変数は更新されません。

私はそれが二つのものの一つだ疑い：

1. Angular2はちょうどそのように動作していないので、スコープの問題です。もし私が ディレクティブセレクタ要素の中にdivを入れて、そのdivに ngClassを添付すれば、それは動作します。私はそれをしないことを好むだろう。
2. 私はウィンドウイベントに反応しています。 Observers、 の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

を

<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

を使用し、代わりにwindow.onscrollにイベントハンドラを割り当てるのでhost listenerを使用したい場合。 Angular change detectionが実行され、実際にスクロールするときに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