Ionic 3: IonicPage 无法 use/bind 自定义组件

Question

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

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

错误输出:

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 被声明为 property/input。

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

export class LocationSearchInput {

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

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

}

我觉得我可能应该 declare/import 页面模块中的自定义组件，但我又不确定。任何建议将不胜感激。

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

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)这里。

One module that imports all component classes, no individual modules for each component components/ components.module.ts (ComponentsModule) imports and exports all components the user creates
component1/
   component1.ts
   component1.html

component2/
  component2.ts
  component2.html
Creating a page using generators automatically imports ComponentsModule

希望上面的内容非常清楚 you.You 必须在 components.module.ts 中创建您的自定义组件。当您使用 CLI 命令创建页面时，它会自动导入 ComponentsModule。

Answer 2

我只是想用一个关键点添加到@Sampath 回答@Phillip Hartin 评论中。

如果您的任何组件使用任何离子标签，即您的 components.module.ts 也需要导入 IonicModule，我的共享组件模块看起来像这样（注意不叫 components.module.ts 并且不在组件文件夹中）

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

Ionic 3: IonicPage 无法 use/bind 自定义组件

Ionic 3: IonicPage can’t use/bind to custom components

ionic-framework

ionic3

angular