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

回答

相关问题