Ionic 3:IonicPage无法使用/绑定到自定义组件
与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
.