Angular 11.0.3 中的 ngClass 错误（无法绑定 ngClass，因为它不是 div 的已知属性）

Question

因此，我正在使用 Angular 项目中的明暗主题，通过 mat-slide-toggle 我正在使用将主题 isDark 布尔值存储为行为主题的服务切换主题。我有两个 2 个模块，其中 1 个用于主页，另一个用于 404 错误页面，如图所示：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavModule } from '@shared/nav/nav.module' ;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NavModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '', pathMatch: 'full', redirectTo: 'classify',
  },
  {
    path: 'classify', loadChildren: () => import('./feature/classify/classify-routing.module').then( m => m.ClassifyRoutingModule)
  },
  {
    path: '**', loadChildren: () => import('./feature/not-found/not-found-routing.module').then( m => m.NotFoundRoutingModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

分类.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ClassifyRoutingModule } from './classify-routing.module';
import { ClassifyComponent } from './classify.component';


@NgModule({
  declarations: [ClassifyComponent],
  imports: [
    CommonModule,
    ClassifyRoutingModule
  ],
  exports: [ClassifyComponent]
})
export class ClassifyModule { }

分类.component.html

<div class="classify-container">
   <div class="pattern" [ngClass]="{ 'dark': isDark}">
   </div>
</div>

分类.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AppSettingsService } from '@core/service/app-settings.service';
import { SubSink } from 'subsink';

@Component({
  selector: 'app-classify',
  templateUrl: './classify.component.html',
  styleUrls: ['./classify.component.scss']
})
export class ClassifyComponent implements OnInit, OnDestroy {
  isDark = false ;
  subs = new SubSink() ;

  constructor(private conf: AppSettingsService){
    this.subs.sink = this.conf.darkMode.subscribe( value => {
      this.isDark = value ;
    }) ;
  }

  ngOnInit(): void {
  }

  ngOnDestroy(): void{
    this.subs.unsubscribe() ;
  }
}

app-setting.service.ts

import { Injectable } from '@angular/core';
import { DeviceDetectorService } from 'ngx-device-detector';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AppSettingsService {
  mobile = false ;
  darkMode: BehaviorSubject<boolean> ;
  theme: string | null;
  constructor(private detector: DeviceDetectorService) {
    this.mobile = this.detector.isMobile() ;
    this.theme = localStorage.getItem('theme') ;
    if (!this.theme){
      this.theme = 'light' ;
      localStorage.setItem('theme', this.theme) ;
    }

    if (this.theme == 'light'){
      this.darkMode = new BehaviorSubject<boolean>(false) ;
    }
    else{
      this.darkMode = new BehaviorSubject<boolean>(true) ;
    }
  }

  private changeTheme(theme: string){
    this.theme = theme ;
    localStorage.setItem('theme', theme) ;
  }

  toggleDarkMode(): void{
    if (this.theme == 'light'){
      this.darkMode.next(true) ;
      this.changeTheme('dark') ;
    }
    else{
      this.darkMode.next(false) ;
      this.changeTheme('light') ;
    }
  }
}

现在在我的浅色主题的 scss 文件中 div.pattern 有一个背景图像，如果我切换主题，那么包含另一个背景图像的深色类必须更改 div 背景，但在编译角度应用程序时。这给了我一个错误，即 ngClass 不是已知属性。请帮助解决这个问题，因为我在各自的位置都导入了浏览模块和通用模块。

package.json

{
  "name": "project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.3",
    "@angular/cdk": "^11.0.2",
    "@angular/common": "~11.0.3",
    "@angular/compiler": "~11.0.3",
    "@angular/core": "~11.0.3",
    "@angular/forms": "~11.0.3",
    "@angular/material": "^11.0.2",
    "@angular/platform-browser": "~11.0.3",
    "@angular/platform-browser-dynamic": "~11.0.3",
    "@angular/router": "~11.0.3",
    "ngx-device-detector": "^2.0.4",
    "rxjs": "~6.6.0",
    "subsink": "^1.0.2",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.3",
    "@angular/cli": "~11.0.3",
    "@angular/compiler-cli": "~11.0.3",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

截图：

app.component.html

<div class="container mat-app-background" [ngClass]="{ 'dark-theme': isDarkTheme }">
   <app-nav></app-nav>
   <div class="load-overlay" *ngIf="isLoading">
      <div class="loader"></div>
   </div>

   <router-outlet></router-outlet>
</div>

更新 1：添加了应用设置服务、package.json、截图（此处更改了变量名）

更新 2：还想分享 App.component.html 具有相同的 ngClass 来切换深色主题，但它运行良好

Answer 1

所以，我正在重新访问我的代码（几乎浪费了 4 个小时来寻找问题的原因），并且显然将 ClassifyComponent 添加到 App.module 的声明数组（其他代码保持不变）消除了错误并且运行良好。谁能解释为什么会这样？