Блог

Главная - Вопросы по программированию - Ошибка ngClass (не удается привязать ngClass, поскольку это неизвестное свойство div) в Angular 11.0.3

Ошибка ngClass (не удается привязать ngClass, поскольку это неизвестное свойство div) в Angular 11.0.3

#html #angular #typescript #sass

#HTML #угловой #машинопись #sass

Вопрос:

Итак, я работал со светлой и темной темой в проекте 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 { }

classify.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

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

classify.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 фон, но при компиляции приложения 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 для переключения темной темы, но он работает отлично

Комментарии:

1. Можете ли вы поделиться AppSettingsService ? Также, если возможно, stackblitz тоже.

2. Вы пытались импортировать CommonModule в app.module.ts?

3. @praga2050 да, я пробовал это, но все равно возникает ошибка ngClass

Ответ №1:

Итак, я пересматривал свой код (почти потратил 4 часа, чтобы найти причину проблемы) и, по-видимому, добавил ClassifyComponent в массив объявлений App.module (другой код остался прежним), удалил ошибку и работал отлично. Кто-нибудь может объяснить, почему это происходит?