angular - ionic 3 : IonicPage can’t use/bind to custom components

Question

尝试一下 Ionic 3 的新 IonicPage ，它处理延迟加载和路由，但难以掌握导入自定义组件。

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

错误输出:

core.es5.js:1085 ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'locations' since it isn't a known property of 'location-search-input'. 1. If 'location-search-input' is an Angular component and it has 'locations' input, then verify that it is part of this module. 2. If 'location-search-input' 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

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

    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 { }