Question

与Ionic 3的新IonicPage进行了一些游戏，它处理延迟加载和路由，但很难掌握导入自定义组件。

如果我初始化一个页面，并且它是相应的模块（根据文档）（见下文），我收到一条错误，指出我的页面模板无法绑定到我的自定义组件的属性。

错误输出：

core.es5.js：1085 ERROR错误：未捕获（在承诺中）：错误：模板解析错误：无法绑定到“位置”，因为它不是“location-search-input”的已知属性。 1.如果'location-search-input'是一个Angular组件并且它有'locations'输入，那么请验证它是否是该模块的一部分。 2.如果'location-search-input'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息。 3.要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”

我只是在我的标记中引用我的自定义组件，如下所示： <location-search-input [locations]="searchLocations"></location-search-input>，在升级到Ionic 3并切换到新的@IonicPage装饰器之前运行良好。

为了清楚起见，这是我的自定义组件的片段，其中locations被声明为属性/输入。

@Component({selector: 'location-search-input', templateUrl: './location-search-input.component.html'})

export class LocationSearchInput {

  @Input() locations: any[] = [];

  constructor(public navController: NavController, private googlePlacesService: GooglePlacesService) {
      }

}

我有一种感觉，我可能应该在页面的模块中声明/导入我的自定义组件，但是我不确定。任何建议都将不胜感激。

页面模块 - 基本模板（根据文档）

import {NgModule} from "@angular/core";
import {IonicPageModule} from "ionic-angular";
import {BrowsePage} from "./browse.page";


@NgModule({
  declarations: [BrowsePage],
  imports: [
    IonicPageModule.forChild(BrowsePage),
  ],
  entryComponents: [
    BrowsePage,
  ]
})
export class BrowsePageModule {
}

Answer 1

根据这里的doc (Handling Components)。

一个导入所有组件类的模块，没有单独的模块对于每个组件组件/ components.module.ts（ComponentsModule）导入和导出用户创建的所有组件
component1/
   component1.ts
   component1.html

component2/
  component2.ts
  component2.html
使用生成器创建页面会自动导入ComponentsModule

希望以上对您来说非常清楚。您必须在components.module.ts内创建自定义组件。使用CLI命令创建页面时，它会自动导入ComponentsModule。

Ionic 3：IonicPage无法使用/绑定到自定义组件

1 个答案: