組件裝飾器的主機屬性中的ngClass不起作用

我創建了以下簡單的示例組件，它使用@Component裝飾器的主機屬性爲組件DOM元素添加了一些屬性和偵聽器。在我的情況下[ngClass]沒有效果。有人知道爲什麼以及如何解決它？組件裝飾器的主機屬性中的ngClass不起作用

import {Injector, Component} from "angular2/core"; 
import {NgClass} from "angular2/common"; 
import {SelectionService} from "../selection-service" 

@Component({ 
    selector: 'my-component', 
    template: `<div>inner template</div>`, 
    host: { 
    'style': 'background-color: yellow', // works 
    '[ngClass]': "{'selected': isSelected}", // does not work 
    '(mouseover)': 'mouseOver($event)', // works 
    '(mouseleave)': 'mouseLeave($event)' // works 
    }, 
    directives: [NgClass] 
}) 
export class MyComponent { 
    private isSelected = false; 

    constructor(private selectionService:SelectionService) { 
    this.selectionService.select$.subscribe((sel:Selection) => { 
     this.isSelected = sel; // has no effect on ngClass 
    }); 
    } 

    mouseOver($event) { 
    console.log('mouseOver works'); 
    } 

    mouseLeave($event) { 
    console.log('mouseLeave works'); 
    } 
}

我使用的是Angular 2.0.0-beta.7。

來源

2016-03-02 thinkh

ngClass是一個指令，不能用於主機綁定。主機綁定僅支持

財產'[propName]':'expr'
屬性'[attr.attrName]':'expr'
事件(event)="someFunction(event);otherExpr"，
風格[style.width]="booleanExpr"
類[class.className]="booleanExpr"結合。
類[class]="expr"其中expr是空格分隔類

來源

2016-03-02 16:46:04

謝謝您的回答字符串。在我的'ngClass'的特定情況下，我添加了'[class.selected] =「isSelected」'，它工作。 – thinkh

當您想要切換的類名是動態的時（通過父類或類似的方式傳遞），在其他情況下可用的綁定表達式正常工作時，通常需要'ngClass'。 –

我在哪裏可以找到關於主機屬性（語法和用法）的詳細解釋？ angular.io上的API文檔中幾乎沒有任何內容。 – user1643352

組件裝飾器的主機屬性中的ngClass不起作用

回答

相關問題