Angular 角度内置指令不起作用（ngClass、ngStyle、ngIf）

下面是关于内置属性和结构指令应用程序的模板语法部分

我根据上面的文档将CurrentClass添加到我的html中：

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

我无法独自完成这项工作，而且是在遵循了其他类似问题的答案之后

我使用Angular 4.4.6和webpack进行编译

---

非常感谢你的帮助

问题是由网页包加载器引起的，尤其是“html加载器”。 html加载程序以小写形式加载您编写的所有html

基本上，我的angular代码在组件的html文件中会有ngClass指令，但当webpack编译代码并通过“html加载程序”加载html时，“ngClass”将变成“ngClass”，我会收到一个错误“错误：模板解析错误：无法绑定到“ngClass”，因为它不是“div”的已知属性。”

我在stackoverflow上发布的另一个问题上找到了解决办法。以下是链接：

解决方案很简单，html加载程序可以设置选项。您需要添加以下设置的内部对象选项：区分大小写：true

下面是我的网页配置文件中的html加载程序设置，现在我可以成功绑定到ngClass指令。希望它能帮助别人

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

---

谢谢你的评论。我读得很仔细，但找不到绕过它的方法。如何使ngclass成为html元素的可绑定属性？绑定到

ngclass

而不是

ngclass

。错误表明您正在绑定到

ngclass

，但实际上它是

ngclass

，带有大写字母

C

，这正是我添加到组件html的方式：这个div最初是可保存的、未更改的和特殊的。控制台日志错误消息显示无法绑定到以小写形式生成ngclass的“ngclass”。我相信这是因为WebPack是如何编译包的@DummyThen，其他一些组件的模板中有

ngclass

，webpack只会捆绑您的代码，抛出错误的是角度。查看整个堆栈跟踪

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 { }

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