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

Question

Ionic 3的新IonicPage可以处理一些延迟的加载和路由，但是在导入自定义组件方面却步履维艰。

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

错误输出：

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

我只是在我的标记中引用了我的自定义组件，如下所示： <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

我只想在一个关键点上向@Sampath回答@Phillip Hartin发表评论。

如果您的任何组件使用任何离子标签，即您的components.module.ts也需要导入IonicModule，则我的共享组件模块如下所示（请注意，未称为components.module.ts，并且不在components文件夹中）

    import { NgModule } from '@angular/core';
    import { IonicModule } from 'ionic-angular';
    import { Component1 } from './component1/component1.component';
    import { Component2 } from './component2/component2.component';
    import { Component3 } from './component3/component3.component';

    @NgModule({
        declarations: [  
            Component1,  
            Component2,
            Component3
        ],
        imports: [
            IonicModule
        ],
        exports: [
            Component1,
            Component2,
            Component3
        ]
    })

    export class SharedModule { }