Ionic 2 无法注册自定义 html 标签

Posted 2023-02-23

【中文标题】Ionic 2 无法注册自定义 html 标签

【英文标题】：Ionic 2 can't register custom html tag

【发布时间】：2017-08-28 20:45:09

【问题描述】：

我遇到了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)

【参考方案1】：

您可能需要将 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
     ...
   ]
)

【讨论】：

我会接受这个答案，因为它为我指明了正确的方向，但略有偏差，但这只是因为我的项目结构。我正在使用的项目模板在其中有一个multiple modules结构。因此，我需要在home.module.ts 中使用declare 而不是declaring 它与app.module，谢谢您的帮助

【参考方案2】：

我遇到了同样的问题，我花了一段时间才弄清楚。 我使用 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 将更容易使用。

【参考方案3】：

您可以在列表项模板内的任何元素上使用 item-content 属性。它会起作用的。

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