带有 ionic cli 的 Ionic 2/3 自定义组件答案

【问题标题】：Ionic 2/3 custom component with ionic cli带有 ionic cli 的 Ionic 2/3 自定义组件
【发布时间】：2017-05-24 14:53:48
【问题描述】：

如果使用 ionic cli 生成组件

ionic g component foobar

然后尝试使用那个选择器

<foobar></foobar>

有一个错误

错误：模板解析错误：'foobar' 不是已知元素：

这完全没有对代码进行任何更改。

在生成的.ts 文件中有一个建议的链接以了解更多详细信息

/**
 * Generated class for the FoobarComponent component.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
 * for more info on Angular Components.
 */

但这只是导航到 404 页面。

有人知道这是否是一个已知问题以及是否有解决方法？

【问题讨论】：

如果我理解你是正确的，你使用的是最新版本的 Ionic 3，它在提供延迟加载的新功能方面存在一些问题。请阅读它here 他们将很快更新 ionic-cli。

标签： angular ionic-framework ionic3 ionic-cli

【解决方案1】：

我遇到了类似的问题，我花了一段时间才弄清楚。我使用 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),
  ],
...

这似乎对我有用！

【讨论】：