Ionic 2がカスタムhtmlタグを登録できません

Question

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) 

Answer 1

おそらく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>--> 
"): HomePage@43:24 

ので

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

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

Answer 2

などの輸入は、私は非常に同じ問題を持っていたし、それを把握するために私にしばらく時間がかかりました。 CLIツールを使用してカスタムコンポーネントを生成しましたが、これにはわずかな問題があります。 私custom-component.module.tsで発電機は

... 
import { IonicModule } from 'ionic-angular'; 
... 
imports: [ 
    IonicModule, 
    ], 
... 

修正の主な問題にこれらの行を変更

... 
import { IonicPageModule } from 'ionic-angular'; 
... 
imports: [ 
    IonicPageModule.forChild(CustomComponent), 
    ], 
... 

を追加しました。 <custom-component>をページのHTMLに使用するには、custom-component.moduleを使用するページモジュールにインポートする必要があります。あなたはホームページの編集 home-page.module.ts

... 
import { CustomComponentModule } from "../../components/custom-component/custom-component.module"; 
... 
imports: [ 
    CustomComponentModule, 
    IonicPageModule.forChild(JobsPage), 
    ], 
... 

そして、それは私のために働くようだ上で、あなたのコンポーネントを使用したい場合例えば ！いったんすべての遅延ロードが実装され、CLIジェネレータが適切に動作していると思うと、Ionicはずっと使いやすくなります。

Answer 3

リストアイテムテンプレート内の任意の要素に対してアイテムコンテンツ属性を使用できます。それが動作します。

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