parsing - 模板解析错误 : Can't bind to 'ng-class' since it isn't a known native property in Angular 2

标签 parsing angular ng-class

<分区>

我正在尝试根据 Angular 2.0.0-beta.15 中 bool 值“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;
   }
  }

但是当我试图查看结果时,未应用样式并且出现错误“模板解析错误: 无法绑定(bind)到“ng-class”,因为它不是已知的 native 属性。有人可以指导我吗?

最佳答案

在 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

关于parsing - 模板解析错误 : Can't bind to 'ng-class' since it isn't a known native property in Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36873532/

相关文章:

javascript - Angular 中的复选框条件类不起作用

javascript - AngularJS 指令 - ng-repeat 中的 ng-class 应该是一个 $watcher 来切换样式吗?

javascript - 使用 Javascript 编写解析器的教程

c++ - 在 C++ 中解析从文本内容缓冲区接收的实时 char* 数据的最佳技术

C# Decimal.Parse 逗号问题

Angular Material 2 Form Field外观问题

javascript - ionic : Show active/inactive button when two times clicked

java - JSON 解析错误 : Cannot deserialize instance of com. Finance.biblioteca.service.dto.LibroDTO 超出 START_ARRAY token ;

angular - 增强中的模块名称无效。模块 'chart.js' 解析为 '/src/chart.js' 处的无类型模块,无法对其进行扩充

javascript - 检查单选按钮选择是否已更改