Ionic 5 / Angular 9 - 将组件导入页面时出错

Question

我在页面中导入和使用组件时遇到问题。

我有一个名为 prueba.component.ts 的组件，它由一个名为 prueba.module.ts

的模块导出

prueba.module.ts:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { PruebaComponent } from './prueba.component';

    @NgModule({
      declarations: [
        PruebaComponent
      ],
      imports: [
        CommonModule,
      ],
      exports: [
        PruebaComponent
      ]

    })
    export class PruebaModule { }

我有一个名为 home.page.ts 的页面，它有一个模块 home-routing.module.ts

首页-routing.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomePage } from './home.page';
import { PruebaModule } from 'src/app/componentes/prueba/prueba.module';
import { CommonModule } from '@angular/common';

const routes: Routes = [
  {
    path: '',
    component: HomePage
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
    PruebaModule
  ],
  exports: [RouterModule],
  declarations: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HomePageRoutingModule {}

我知道这足以在页面中使用该组件，但它继续显示图像错误。

我很感激你能给我的任何帮助。

Answer 1

在这里我猜你混淆了模块和路由模块。如果你想在另一个模块中使用你的 PruebaComponent 那么你需要在那个模块中导入 PruebaModule 。假设您的模块名称是 home.module.ts 那么您需要在 home.module.ts 而不是 home-routing.module.ts

中添加 PruebaModule

基本上你的 home.module.ts 应该是这样的。

@NgModule({
imports: [
CommonModule,
PruebaModule]
})
export class HomeModule{ }

现在您只需在家中使用 preubaComponent-routing.module.ts 所以 home-routing.module.ts 看起来像这样。

    const routes: Routes = [{
             path: '',
             component: HomePage}
          ];
  @NgModule({
     imports: [
     RouterModule.forChild(routes)
    ],
     exports: [RouterModule]
     })
  export class HomePageRoutingModule {}

现在您可以在首页组件中使用组件名称了。所以你的 homepage.component.html 只会有下面一行。

<app-prueba></app-prueba>

Ionic 5 / Angular 9 - 将组件导入页面时出错

Ionic 5 / Angular 9 - Error importing componente to page

ionic-framework

angular

ionic4