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的页面

home-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中添加PruebaModule，而不是在home-routing.module.ts

中添加

所以基本上您的home.module.ts应该看起来像这样。

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

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

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

现在您可以在Homepage组件中使用组件名称。因此，您的homepage.component.html只需包含以下行。

<app-prueba></app-prueba>