Question

在我的项目中，我正在使用延迟加载因此，在我的注册模块中，当[ngClass]在我的注册表单上有一些验证错误时，我正在使用formGroup指令添加无效的类。但是当我尝试在表单上添加[ngClass]指令时，我的代码会引发异常。

无法绑定到'ngClass'，因为它不是'input'的已知属性

在调查错误本身时，我遇到了几个解决方案，比如将'directive：[NgStyle]'添加到组件中，但这并没有解决问题。

这是我的代码：

register.router.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RegisterComponent } from "app/modules/register/register.component";


const routes: Routes = [
{
    path: '', pathMatch: 'full',
    component: RegisterComponent
}
];

@NgModule({
    imports: [
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule
],
declarations: [RegisterComponent],
    exports: [RouterModule]
})
export class RegisterRouter { }

register.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterRouter } from './register.router';  


@NgModule({
    imports: [
      CommonModule,
      RegisterRouter
],
    declarations: []
})
export class RegisterModule { }

register.component.ts

import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

    @Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

//#region Declarations
    UserForm: FormGroup;
    inValid: boolean = false;
//#endregion

constructor(
    private _fb: FormBuilder) { 
    this.UserForm =  _fb.group({
    "_firstname" : ['', Validators.required]
    });
}
}

register.component.html

<input type="text" class="form-control" [ngClass]="{'ahinValid': inValid}" id="txtFirst_Name" aria-describedby="ariaFirstName" placeholder="Enter First Name"
          name="_firstname" [formControl]="UserForm.controls['_firstname']">

感谢您的帮助。

Answer 1

由于timestamp已在RegisterComponent（模块的名称是什么？）模块中声明，因此您必须在那里导入RegisterRouter：

CommonModule

Answer 2

对于即使在导入CommonModule之后仍然遇到这些问题的任何人

我有一个我无法编译的库。我有几个模块..这些模块正在导入其他较小的/组件：

我的一个较小模块中的一个组件中包含[ngClass]。这将导致lib无法编译并抛出Can't bind to 'ngClass' since it isn't a known property of 'div'

显然...我正在导出该模块的所有组件...但不是public-api.ts文件（执行CommonModule导入的模块）中的模块本身：

export * from './lib/af-layout/af-layout.module'; // <==== THAT WAS MISSING
export * from './lib/af-layout/components/af-layout-header/af-layout-header.component';

我花了很长时间才发现。.因为错误使我无法导入CommonModule。.并不是说缺少导出。

Answer 3

你需要导入commonModule

@NgModule({
  imports: [CommonModule],
  ...
})

Answer 4

惰性加载共享模块发布常见解决方案：

两个模块都必须导入CommonModule

在共享模块中：

@NgModule({
  imports: [CommonModule],
  ...
})

要在其中使用组件的模块：

@NgModule({
  imports: [CommonModule, ...],
  ...
})

Answer 5

除了 Common Module 包含在父模块（例如 app.module）的导入中之外，还要确保引发问题的组件实际上包含在父模块的声明中模块。

Answer 6

添加 Common 模块对我也不起作用。将我的组件添加到其模块的“声明”中效果很好。

参考 - https://www.javaer101.com/en/article/42275629.html

Angular4异常：无法绑定到'ngClass'，因为它不是'input'的已知属性

6 个答案: