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

一、报错:

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],
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值