离子/角度组件没有出现答案

【问题标题】：Ionic/Angular components aren't showing up离子/角度组件没有出现
【发布时间】：2022-07-09 00:00:52
【问题描述】：

我是 ionic 新手，但非常精通 angular。我正在尝试向我的 ionic/angular 项目添加一个组件，但我似乎无法让新组件正确显示。我认为这是一个路由问题。我已经使用ionic g component my-component 和ng g c my-other-component 生成了新组件，它们似乎正常生成。但是，当我尝试通过<app-my-component></app-my-component> 将新组件添加到页面时，它不会出现。我注意到，当我的新组件生成时，它们是使用它们的 html、ts、spec.ts 和 scss 文件生成的，而不是使用模块文件生成的。那是问题吗？如果是这样，我如何让 ionic 自动将模块文件/路由添加到新创建的组件？

【问题讨论】：

Angular 组件不需要模块文件就能正确显示。组件和模块之间是有区别的。这也不是为什么 ionic 没有显示它的问题。请添加您的代码minimal reproducible example，以便我们为您提供帮助。

标签： angular ionic-framework components

【解决方案1】：

我用来在 Ionic 项目中包含自定义组件的解决方案如下。

首先，将任何组件生成到“组件”目录中，以保持事物井井有条。使用您的示例，将使用命令ionic g component components/my-component。

然后在组件目录的根目录下创建一个通用组件模块“components.module.ts”。对其内容使用以下格式：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

// In this example, MyComponent would be imported as follows:
// import { MyComponent } from './my-component/my-component.component';

@NgModule({
    declarations: [/*Declare your components here. e.g. MyComponent*/],
  providers: [],
  imports: [
    CommonModule,
    IonicModule,
    // Add modules to import here. e.g. FormsModule
  ],
    exports: [/*Same as declarations*/]
})
export class ComponentsModule { }

最后，将 ComponentsModule 添加到 'app.module.ts' 的导入列表中并导入。

添加到 ComponentsModule 的所有组件现在应该在重新编译时包含在您的项目中。

【讨论】：

【解决方案2】：

ionic 中有两件事：组件和页面。尽管它们并没有太大的不同，但页面是具有模块和路由模块的组件。您可以使用以下方法生成页面：

ionic generate page page-name

更多信息，您可以访问pages and components

【讨论】：