-1

我正在关注模板语法部分，以从这里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 中：

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

在浏览器的控制台上，我收到以下错误：

错误：模板解析错误：无法绑定到“ngclass”，因为它不是“div”的已知属性。

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

我的 app.module.ts 包括 Common Module 因为这是一些答案中建议的解决方案 - 但这对我没有帮助：

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

在遵循对类似问题的其他一些答案之后，我无法独自完成这项工作。

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

非常感谢您的帮助。

4

1 回答 1

1

问题是由 webpack 加载器特别是“html-loader”引起的。html-loader 以小写形式加载您在 Angular 中编写的所有 HTML。

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

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

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

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

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

        {
            test: /\.(html)$/,
            exclude: "/node_modules/",
            use: [
                { 
                    loader: 'html-loader',
                    options: {
                        minimize: true,
                        caseSensitive: true,
                        removeComments: false,
                        collapseWhitespace: false
                      } 
                }
            ]
        },
于 2017-12-03T06:07:02.930 回答