我遇到了Ionic 2
和custom components
的问题。我创建了一个component
来显示在列表中。该组件是列表项。问题是当我尝试使用自定义html标签时,我的应用程序崩溃了。我在下面添加了堆栈跟踪。我不确定问题是什么。我从angular 2 documents开始遵循本指南,但代码似乎不起作用。
感谢您的帮助
自定义组件文件
import { Component, Input} from '@angular/core';
import {EventInfo} from '../../../models/event-info';
@Component({
selector: 'event-item',
templateUrl: 'event-item.html'
})
export class EventItemComponent {
@Input() eventInfo: EventInfo;
constructor(){
}
}
我试图在home.html文件中使用自定义标记
<div *ngFor="let item of eventList._events">
<event-item [eventInfo]="item"></event-item>
</div>
这是我在浏览器中的堆栈跟踪
Unhandled Promise rejection: Template parse errors:
Can't bind to 'eventInfo' since it isn't a known property of 'event-item'.
1. If 'event-item' is an Angular component and it has 'eventInfo' input, then verify that it is part of this module.
2. If 'event-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
("n-list *ngIf="loaded">
<div *ngFor="let item of eventList._events">
<event-item [ERROR ->][eventInfo]="item"></event-item>
</div>
<!--<ion-card>-->
"): HomePage@43:24
'event-item' is not a known element:
1. If 'event-item' is an Angular component, then verify that it is part of this module.
2. If 'event-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-list *ngIf="loaded">
<div *ngFor="let item of eventList._events">
[ERROR ->]<event-item [eventInfo]="item"></event-item>
</div>
<!--<ion-card>-->
"): HomePage@43:12 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {_nativeError: Error: Template parse errors:
Can't bind to 'eventInfo' since it isn't a known property of 'event-it…} Error: Template parse errors:
Can't bind to 'eventInfo' since it isn't a known property of 'event-item'.
1. If 'event-item' is an Angular component and it has 'eventInfo' input, then verify that it is part of this module.
2. If 'event-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
("n-list *ngIf="loaded">
<div *ngFor="let item of eventList._events">
<event-item [ERROR ->][eventInfo]="item"></event-item>
</div>
<!--<ion-card>-->
"): HomePage@43:24
'event-item' is not a known element:
1. If 'event-item' is an Angular component, then verify that it is part of this module.
2. If 'event-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-list *ngIf="loaded">
<div *ngFor="let item of eventList._events">
[ERROR ->]<event-item [eventInfo]="item"></event-item>
</div>
<!--<ion-card>-->
"): HomePage@43:12
at v (http://localhost:8100/build/polyfills.js:3:4864)
at SyntaxError.BaseError [as constructor] (http://localhost:8100/build/main.js:107253:27)
at new SyntaxError (http://localhost:8100/build/main.js:11219:16)
at TemplateParser.parse (http://localhost:8100/build/main.js:26474:19)
at JitCompiler._compileTemplate (http://localhost:8100/build/main.js:71153:68)
at http://localhost:8100/build/main.js:71036:62
at Set.forEach (native)
at JitCompiler._compileComponents (http://localhost:8100/build/main.js:71036:19)
at createResult (http://localhost:8100/build/main.js:70918:19)
at t.invoke (http://localhost:8100/build/polyfills.js:3:9655)
at e.run (http://localhost:8100/build/polyfills.js:3:7019)
at http://localhost:8100/build/polyfills.js:3:4661
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:10284)
at e.runTask (http://localhost:8100/build/polyfills.js:3:7637)
at i (http://localhost:8100/build/polyfills.js:3:3707)
o @ polyfills.js:3
r @ polyfills.js:3
i @ polyfills.js:3
polyfills.js:3 Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'eventInfo' since it isn't a known property of 'event-item'.
1. If 'event-item' is an Angular component and it has 'eventInfo' input, then verify that it is part of this module.
2. If 'event-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
("n-list *ngIf="loaded">
<div *ngFor="let item of eventList._events">
<event-item [ERROR ->][eventInfo]="item"></event-item>
</div>
<!--<ion-card>-->
"): HomePage@43:24
'event-item' is not a known element:
1. If 'event-item' is an Angular component, then verify that it is part of this module.
2. If 'event-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-list *ngIf="loaded">
<div *ngFor="let item of eventList._events">
[ERROR ->]<event-item [eventInfo]="item"></event-item>
</div>
<!--<ion-card>-->
"): HomePage@43:12
Error: Template parse errors:
Can't bind to 'eventInfo' since it isn't a known property of 'event-item'.
1. If 'event-item' is an Angular component and it has 'eventInfo' input, then verify that it is part of this module.
2. If 'event-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
("n-list *ngIf="loaded">
<div *ngFor="let item of eventList._events">
<event-item [ERROR ->][eventInfo]="item"></event-item>
</div>
<!--<ion-card>-->
"): HomePage@43:24
'event-item' is not a known element:
1. If 'event-item' is an Angular component, then verify that it is part of this module.
2. If 'event-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-list *ngIf="loaded">
<div *ngFor="let item of eventList._events">
[ERROR ->]<event-item [eventInfo]="item"></event-item>
</div>
<!--<ion-card>-->
"): HomePage@43:12
at v (http://localhost:8100/build/polyfills.js:3:4864)
at SyntaxError.BaseError [as constructor] (http://localhost:8100/build/main.js:107253:27)
at new SyntaxError (http://localhost:8100/build/main.js:11219:16)
at TemplateParser.parse (http://localhost:8100/build/main.js:26474:19)
at JitCompiler._compileTemplate (http://localhost:8100/build/main.js:71153:68)
at http://localhost:8100/build/main.js:71036:62
at Set.forEach (native)
at JitCompiler._compileComponents (http://localhost:8100/build/main.js:71036:19)
at createResult (http://localhost:8100/build/main.js:70918:19)
at t.invoke (http://localhost:8100/build/polyfills.js:3:9655)
at e.run (http://localhost:8100/build/polyfills.js:3:7019)
at http://localhost:8100/build/polyfills.js:3:4661
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:10284)
at e.runTask (http://localhost:8100/build/polyfills.js:3:7637)
at i (http://localhost:8100/build/polyfills.js:3:3707)
at v (http://localhost:8100/build/polyfills.js:3:4864)
at SyntaxError.BaseError [as constructor] (http://localhost:8100/build/main.js:107253:27)
at new SyntaxError (http://localhost:8100/build/main.js:11219:16)
at TemplateParser.parse (http://localhost:8100/build/main.js:26474:19)
at JitCompiler._compileTemplate (http://localhost:8100/build/main.js:71153:68)
at http://localhost:8100/build/main.js:71036:62
at Set.forEach (native)
at JitCompiler._compileComponents (http://localhost:8100/build/main.js:71036:19)
at createResult (http://localhost:8100/build/main.js:70918:19)
at t.invoke (http://localhost:8100/build/polyfills.js:3:9655)
at e.run (http://localhost:8100/build/polyfills.js:3:7019)
at http://localhost:8100/build/polyfills.js:3:4661
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:10284)
at e.runTask (http://localhost:8100/build/polyfills.js:3:7637)
at i (http://localhost:8100/build/polyfills.js:3:3707)
at v (http://localhost:8100/build/polyfills.js:3:4864)
at s (http://localhost:8100/build/polyfills.js:3:4289)
at s (http://localhost:8100/build/polyfills.js:3:4112)
at http://localhost:8100/build/polyfills.js:3:4652
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:10284)
at e.runTask (http://localhost:8100/build/polyfills.js:3:7637)
at i (http://localhost:8100/build/polyfills.js:3:3707)
答案 0 :(得分:2)
您可能需要将您的EventInfo组件作为EntryComponent导入到app.module.ts文件中,并根据错误日志中的#2进行声明。
2. If 'event-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
("n-list *ngIf="loaded">
<div *ngFor="let item of eventList._events">
<event-item [ERROR ->][eventInfo]="item"></event-item>
</div>
<!--<ion-card>-->
"): HomePage@43:24
像这样导入
import {EventInfo} from '../../../models/event-info';
...
@NgModule({
declarations: [
...
EventInfo
...
],
entryComponents: [
...
EventInfo
...
]
})
答案 1 :(得分:0)
我遇到了同样的问题,我花了一段时间才弄明白。
我使用CLI工具生成自定义组件,这似乎有一个小问题。
在我的custom-component.module.ts
中,生成器添加了
...
import { IonicPageModule } from 'ionic-angular';
...
imports: [
IonicPageModule.forChild(CustomComponent),
],
...
将这些行更改为
...
import { IonicModule } from 'ionic-angular';
...
imports: [
IonicModule,
],
...
修复了主要问题。
要在页面的HTML中使用<custom-component>
,您必须将custom-component.module
导入到要使用它的页面模块中。
例如,如果您想在主页编辑中使用您的组件
home-page.module.ts
...
import { CustomComponentModule } from "../../components/custom-component/custom-component.module";
...
imports: [
CustomComponentModule,
IonicPageModule.forChild(JobsPage),
],
...
这似乎对我有用!我想一旦实现了所有延迟加载并且CLI生成器正常工作,Ionic将更容易使用。
答案 2 :(得分:0)