Ionic 2无法注册自定义html标签
我遇到了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)
3 个答案:
答案 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)
您可以对列表项模板中的任何元素使用 item-content 属性。它会起作用。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<ion-list>
<ion-card item-template *ngFor="let item of items">
<img ion-img item-left src="ion-list"/>
<div item-content> any content you want... </div>
</ion-card>
</ion-list>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？