Ionic3生产构建时自定义组件control-messages绑定报错求助

首先，这个错误的核心原因是Angular在构建过程中无法识别control-messages组件的control输入属性，要么是组件本身的输入定义有问题，要么是组件没有被正确引入到使用它的模块中。结合你提供的代码，我给你一步步的解决方案：

1. 检查ControlMessageComponent的输入属性定义 #

首先确保你的control-message.component.ts里正确声明了control输入属性，代码应该类似这样：

import { Component, Input } from '@angular/core';
import { AbstractControl } from '@angular/forms';

@Component({
  selector: 'control-messages',
  template: `<!-- 你的组件模板内容 -->`
})
export class ControlMessageComponent {
  @Input() control: AbstractControl; // 关键：必须添加@Input()装饰器声明这个输入属性

  // 组件的其他逻辑代码...
}

如果这里缺少@Input()装饰器，Angular就会认为control不是组件的合法输入属性，直接抛出你看到的错误。

2. 修正AppModule的配置 #

你的ComponentsModule已经正确声明并导出了ControlMessageComponent，但你的AppModule犯了一个常见错误：直接导入了组件本身，却没有导入包含它的ComponentsModule。请按以下步骤修改：

步骤a：移除AppModule中对组件的直接导入 #

删掉AppModule里这一行：

import { ControlMessageComponent } from '../components/control-message/control-message';

步骤b：导入ComponentsModule并添加到imports数组 #

在AppModule中添加ComponentsModule的导入，并把它放到imports数组里：

// 先导入ComponentsModule
import { ComponentsModule } from '../components/component.module';

@NgModule({
  declarations: [
    // 注意：这里不要添加ControlMessageComponent！它已经在ComponentsModule里声明了
    MyApp,
    HomePage,
    BundlesAssortedPage,
    // ...其他页面组件
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
    ComponentsModule // 把ComponentsModule加到这里，让App模块能识别组件
  ],
  // ...其他配置（providers、bootstrap等）
})
export class AppModule {}

3. 验证并测试 #

修改完成后，先运行开发环境验证代码是否正常：

ionic serve

如果开发环境没有报错，再执行生产构建命令：

ionic cordova build --prod

这样应该就能解决你遇到的Can't bind to 'control' since it isn't a known property of 'control-messages'错误了。

内容的提问来源于stack exchange，提问作者Hamza_Idrees