[英]ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3
So, I was working with a light and dark theme in angular project, through mat-slide-toggle I am switching theme with a service storing the theme isDark
boolean as Behavioral Subject.因此,我正在使用 angular 项目中的明暗主题,通过 mat-slide-toggle 我正在使用存储主题
isDark
boolean 作为行为主题的服务切换主题。 I have two 2 modules that are lazy-loaded 1 for the home page and the other for the 404 error page as shown:我有两个 2 个模块,其中 1 个用于主页,另一个用于 404 错误页面,如图所示:
app.module.ts 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应用程序路由.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 { }
classify.module.ts分类.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 { }
classify.component.html分类.component.html
<div class="classify-container"> <div class="pattern" [ngClass]="{ 'dark': isDark}"> </div> </div>
classify.component.ts分类.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应用程序设置.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') ; } } }
Now in my scss file for light theme div.pattern
has a background image and if I toggle theme then the dark class containing another background image must change the div
background but on compiling the angular app.现在在我的浅色主题
div.pattern
的 scss 文件中有一个背景图像,如果我切换主题,那么包含另一个背景图像的深色 class 必须更改div
背景,但在编译 angular 应用程序时。 It's giving me an error that ngClass is not a known property.这给了我一个错误,即 ngClass 不是已知属性。 Please help with this issue as I have both browse Module and common module imported in their respective locations.
请帮助解决这个问题,因为我在各自的位置都导入了浏览模块和通用模块。
package.json 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" } }
screenshot:截屏:
app.component.html 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>
Update 1 : Added app-setting service, package.json, screenshot (variable name was changed here)更新 1 :添加了应用程序设置服务,package.json,屏幕截图(此处更改了变量名称)
Update 2 : Also want to share that App.component.html has the same ngClass for toggling the dark theme but it's working perfectly更新 2 :还想分享 App.component.html 具有相同的 ngClass 来切换黑暗主题,但它工作得很好
So, I was revisiting my code(nearly wasted 4hours to find cause of issue) and apparently adding ClassifyComponent to App.module's declarations array (other code remained same) removed the error and was working perfectly.因此,我正在重新访问我的代码(几乎浪费了 4 个小时来寻找问题的原因),并且显然将 ClassifyComponent 添加到 App.module 的声明数组(其他代码保持不变)消除了错误并且运行良好。 Can anyone explain why is this happening?
谁能解释为什么会这样?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.