Angular报错error NG8002: Can‘t bind to ‘XXX‘ since it isn‘t a known property of ‘XXX-XX‘

傅恺
2023-12-01

一、报错:

error NG8002: Can't bind to 'isTemplate' since it isn't a known property of 'create-home'.

1. If 'create-home' is an Angular component and it has 'isTemplate' input, then verify that it is part of this module.

2. If 'create-home' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. 

error NG8002: Can't bind to 'isTemplate' since it isn't a known property of 'create-home'.
1. If 'create-home' is an Angular component and it has 'isTemplate' input, then verify that it is part of this module.
2. If 'create-home' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

27         <create-home [isTemplate]="isTemplate" ></create-home>
                        ~~~~~~~~~~~~~~~~~~~~~~~~~

  libs/home/fe/view/src/lib/pages/main/main.page.ts:21:16
    21   templateUrl: './main.page.html',
                      ~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MainPage.

二、分析问题

看上面的报错信息:Can't bind to 'isTemplate' since it isn't a known property of 'create-home',是因为给组件绑定了isTemplate导致报错

一般这种情况有两种原因:

1.没有在主模块app.module.ts导入FormsModule

2.没有在子组件(这里是create-home组件)接收isTemplate

三、解决

1、在主模块app.module.ts导入FormsModule并配置


import { CreateComponent } from './components'
import { FormsModule } from '@angular/forms'
@NgModule({
  imports: [
    FormsModule
  ],
  declarations: [CreateComponent],
})

2、在子组件create.componet.ts接收isTemplate

 @Input() isTemplate: boolean = false

import { Component, OnInit, Input} from '@angular/core'
@Component({
  selector: 'create-home',
  templateUrl: './create.componet.html',
})
export class CreateComponent implements OnInit{

  @Input() isTemplate: boolean = false

  constructor() {}

  async ngOnInit() {
     
  }

}

四、类似的报错

error NG8001: 'create-home' is not a known element: 1. If 'create-home' is an Angular component, then verify that it is part of this module. 2. If 'create-home' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

这个报错是因为'create-home'组件没有在主模块导入和声明declarations

解决办法:declarations: [CreateComponent]

import { CreateComponent } from './components'
import { FormsModule } from '@angular/forms'
@NgModule({
  imports: [
    FormsModule
  ],
  declarations: [CreateComponent],
})

 类似资料: