模板解析錯誤：無法綁定到'ng-class'，因爲它不是Angular 2中已知的本地屬性

Question

我想基於布爾值isLoginPage對img屬性有條件地應用CSS樣式'在Angular 2.0.0-beta.15中。 HTML的部分是如下：

<a class="navbar-brand" href="#/"> 
    <img src="/src/resources/images/logo.png" [ng-class]="{logoStyle: isLoginPage, navLogoStyle: !isLoginPage}" /></a> 

logoStyle和navLogoStyle在css類提到及其在主html頁面添加。在相應的組件，我設置isLoginPage的值，如下所示：

import {Component, Input} from 'angular2/core'; 
import {NgClass} from 'angular2/common'; 

@Component({ 
selector: 'header', 
inputs: ['isLoginPage'], 
templateUrl: './header.html', 
directives: [ROUTER_DIRECTIVES, RouterLink, NgClass] 
}) 
export class HeaderComponent { 
    isLoginPage: boolean; 
    constructor(){ 
    if(condition){ 
    this.isLoginPage = true; 
    } 
    } 

但是，當我想看到的結果，風格是不適用的錯誤「模板解析錯誤： 不能結合顯示'ng-class'，因爲它不是已知的本地財產'。有人可以指導我嗎？

Answer 1

在Angular2中，解析器現在查找指令的camelCase名稱。所以你的情況，你想改變ng-class到ngClass

<img src="/src/resources/images/logo.png" [ngClass]="{logoStyle: isLoginPage, navLogoStyle: !isLoginPage}" /></a> 

You can see the documentation for the implementation here