Angular 11.0.3 中的 ngClass 錯誤（無法綁定 ngClass，因為它不是 div 的已知屬性）

Question

因此，我正在使用 angular 項目中的明暗主題，通過 mat-slide-toggle 我正在使用存儲主題isDark boolean 作為行為主題的服務切換主題。 我有兩個 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 { }

應用程序路由.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(); } }

應用程序設置.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') ; } } }

現在在我的淺色主題div.pattern的 scss 文件中有一個背景圖像，如果我切換主題，那么包含另一個背景圖像的深色 class 必須更改div背景，但在編譯 angular 應用程序時。 這給了我一個錯誤，即 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 的聲明數組（其他代碼保持不變）消除了錯誤並且運行良好。 誰能解釋為什么會這樣？