Angular内置指令不起作用(ngClass，ngStyle，ngIf) [英] Angular Built-in Directives are not working(ngClass, ngStyle, ngIf)

问题描述

我正在从此处遵循模板语法部分中的内置属性和结构指令的应用

I am following Template syntax section for the application of built-in attribute and structural directives from here https://v4.angular.io/guide/template-syntax#ngclass

currentClasses: {};
    setCurrentClasses() {
    // CSS classes: added/removed per current state of component properties
    this.currentClasses =  {
    'saveable': this.canSave,
    'modified': !this.isUnchanged,
    'special':  this.isSpecial
  };
}

我按照上述Angular文档将currentClasses添加到我的html中:

I add currentClasses to my html as per Angular documentation above:

<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>

在浏览器的控制台上，出现以下错误:

错误:模板解析错误: 无法绑定到"ngclass"，因为它不是"div"的已知属性.

Error: Template parse errors: Can't bind to 'ngclass' since it isn't a known property of 'div'.

我也尝试了ngStyle和ngIf，但是得到了相同的错误代码.

I tried also ngStyle and ngIf but getting the same error code.

我的app.module.ts包含通用模块"，因为这是某些答案中建议的解决方案-但这对我没有帮助:

My app.module.ts includes Common Module as this was the suggested solution in some of the answers - but this has not helped me:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
import { MaterialModule } from './material-module';
import { HighlightDirective } from './highlight.directive';

import { BrowserAnimationsModule } from '@angular/platform 
browser/animations';
import { PlatformModule } from '@angular/cdk/platform';
import { BreakpointObserver, MediaMatcher } from '@angular/cdk/layout';

// import { MediaService } from './Media.service';

@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    PlatformModule  
  ],
  providers: [BreakpointObserver, MediaMatcher],
  bootstrap: [AppComponent]
})

export class AppModule { }

我无法独自完成这项工作，也无法遵循针对类似问题的其他答案.

I could not make it a work by myself and also after following some other answers given to similar questions.

我正在使用Angular 4.4.6和webpack进行编译.

I am using Angular 4.4.6 and webpack to compile.

非常感谢您的帮助.

推荐答案

问题是由webpack加载程序引起的，尤其是"html-loader". html-loader会以小写形式加载您在Angular中编写的所有HTML.

The problem was caused by webpack loader particularly the "html-loader". The html-loader loads all the HTML you write in Angular in lowercase.

基本上，我的角度代码将在组件的html文件中包含ngClass指令，但是当webpack编译代码并通过"html-loader"加载html时，"ngClass"将变为"ngclass"，并且我会收到错误消息"Error :模板解析错误:由于它不是'div'的已知属性，因此无法绑定到'ngclass'."

Basically, my angular code would have ngClass directive in a component's html file but when webpack compiled the code and loaded the html by "html-loader", "ngClass" would become "ngclass" and I would receive an error "Error: Template parse errors: Can't bind to 'ngclass' since it isn't a known property of 'div'.".

我找到了关于stackoverflow上发布的另一个问题的解决方法.以下是链接:

I found the way around on another question posted on stackoverflow. Below is the link:

webpack html-loaders小写的angular 2内置指令

解决方案很简单，html-loader可以设置选项.您将需要在选项对象内添加以下设置:caseSensitive:true

The solution is simple, html-loader can have options set up. You will need to add inside options object the following setting: caseSensitive: true

下面是我的webpack配置文件中的html-loader设置，现在我可以成功绑定到ngClass指令了.希望对别人有帮助.

Below is my html-loader setting in my webpack config file and now I can bind to ngClass directive successfully. Hope it helps others.

        {
            test: /\.(html)$/,
            exclude: "/node_modules/",
            use: [
                { 
                    loader: 'html-loader',
                    options: {
                        minimize: true,
                        caseSensitive: true,
                        removeComments: false,
                        collapseWhitespace: false
                      } 
                }
            ]
        },

这篇关于Angular内置指令不起作用(ngClass，ngStyle，ngIf)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！