Ionic 3：IonicPage无法使用/绑定到自定义组件 [英] Ionic 3: IonicPage can’t use/bind to custom components

问题描述

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

Having a bit of a play around with Ionic 3's new IonicPage, which handles lazy loading and routing, but struggling to get to grips with importing custom components.

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

If I initialise a page, and it's corresponding module as per the docs (see below), I get an error stating that my page template cannot bind to the properties of my custom components.

错误输出：

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'

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 装饰器之前效果很好。

I simply reference my custom component in my markup as follows: <location-search-input [locations]="searchLocations"></location-search-input>, which worked perfectly well prior to upgrading to Ionic 3 and switching to the new @IonicPage decorators.

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

Just for clarity here's a snippet of my custom component, in which locations is declared as a 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) {
      }

}

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

I have a feeling I am perhaps supposed to declare/import my custom component in the page's Module, but then again I'm not sure. Any advice would be greatly appreciated.

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

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

推荐答案

根据本 doc（处理组件） 。

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

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

使用生成器创建页面会自动导入ComponentsModule

Creating a page using generators automatically imports ComponentsModule

希望以上内容非常明确你必须在 components.module.ts 中创建你的自定义组件。当你使用CLI命令创建一个页面时，它会自动导入 ComponentsModule 。

Hope above is very clear for you.You have to create your custom component inside the components.module.ts.When you create a page using CLI commands, it'll automatically import ComponentsModule.

这篇关于Ionic 3：IonicPage无法使用/绑定到自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！