模板解析错误：无法绑定到'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