angular - 带有 ionic cli 的 Ionic 2/3 自定义组件

Question

如果使用 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 页面。

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

Answer 1

我有一个类似的问题，我花了一段时间才弄清楚。我使用 CLI 工具生成自定义组件，这似乎有一个小问题。在我custom-component.module.ts的生成器中添加了

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

将这些行更改为

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

修复了主要问题。要<custom-component>在页面的 HTML 中使用，您必须将其导入custom-component.module到要使用它的页面模块中。例如，如果您想在主页编辑上使用您的组件home-page.module.ts

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

这似乎对我有用！