模板解析错误:无法绑定到"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类中提到,并在主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>

您可以在此处查看实施文档