模板解析错误：无法绑定到 'ng-class'，因为它不是 Angular 中的已知原生 属性 2

Question

我正在尝试根据 Angular 2.0.0-beta.15 中的布尔值 'isLoginPage' 有条件地在 img 属性上应用 CSS 样式。 html的部分如下：

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

logoStyle 和 navLogoStyle 在 css class 中提到，并在 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