Ionic 2無法註冊自定義html標記

我遇到了Ionic 2和custom components的問題。我創建了一個component以顯示在列表中。該組件是列表項。問題是當我嘗試使用自定義html標記時，我的應用程序崩潰。我在下面添加了我的堆棧跟蹤。我不確定問題是什麼。我遵循angular 2 documents這個指南，但代碼似乎不工作。感謝您的幫助Ionic 2無法註冊自定義html標記

自定義組件文件

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>--> 
"): [email protected]: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>--> 
"): [email protected]: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>--> 
"): [email protected]: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>--> 
"): [email protected]: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>--> 
"): [email protected]: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>--> 
"): [email protected]: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>--> 
"): [email protected]: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>--> 
"): [email protected]: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)

來源

2017-04-03 VirtualProdigy

您可能需要將您的EventInfo組件導入到您的app.module.ts文件作爲EntryComponent並根據錯誤日誌中的＃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>--> 
"): [email protected]:24

進口，像這樣

import {EventInfo} from '../../../models/event-info'; 
... 

@NgModule({ 
    declarations: [ 
    ... 
    EventInfo 
    ... 
    ], 
    entryComponents: [ 
    ... 
    EventInfo 
    ... 
    ] 
})

來源

2017-04-03 22:46:48

我要去，因爲它向我指出了正確的方向，但是是稍微偏離接受這個答案，但這只是我的項目結構的原因。我正在使用的項目模板有一個「多模塊」結構，因此不需要用app.module聲明它，而是需要在'home.module.ts'中聲明'謝謝你的幫助 – VirtualProdigy

我有同樣的問題，這是我花了一段時間來弄明白。我使用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生成器正常工作，離子將更容易使用。

來源

2017-05-24 06:26:45

您可以在列表項目模板內的任何元素上使用項目內容屬性。它會工作。

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

來源

2017-07-11 14:01:07

Ionic 2無法註冊自定義html標記

回答

相關問題