Angular2 - 指令選擇器上的ngclass

我正在使用最新的Angular 2 beta（45？），並試圖將ngClass附加到由指令選擇器標識的元素。用於切換類的變量不會更新。Angular2 - 指令選擇器上的ngclass

我懷疑這是兩件事情之一：

Angular2只是不工作的方式，所以這是一個範圍界定問題;如果我在指令選擇器元素內部放置一個div並將ngClass附加到該div，它就可以工作。我寧願不要那樣做。
因爲我對窗口事件作出反應。我試過使用Observers， setTimeout hackery和區域。沒有運氣。

有沒有辦法做我想做的事情？那不就是如何做了嗎？

示例代碼從存儲器中寫，因爲我沒有當前訪問它：

@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>

templates/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>

來源

2016-03-31 oooyaya

'我使用的是最新的角2β（45？）'給予好評的笑。 –

哈哈我知道的權利。介於0到1000之間。 – oooyaya

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; 
    } 
}

來源

2016-03-31 17:50:33

非常好。我敢打賭，這將工作。通過主機或通過子容器做這種事情有什麼性能優勢嗎？ – oooyaya

不，這就像'ngClass'，但綁定到內部的值而不是指令/組件的外部。 –

除了岡特的回答，請使用host listener而不是分配一個事件處理window.onscroll。然後，角度更改檢測將運行並在滾動時實際更新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

來源

2016-03-31 20:02:34

完美。一旦我想起了關於hostListener的主機，並且完全按照您的建議進行操作。非常有幫助 - 謝謝。 – oooyaya

Angular2 - 指令選擇器上的ngclass

回答

相關問題