Ioni c 5 / Angular 9 - Ошибка при импорте компонента на страницу - PullRequest
Новая
       4

Ioni c 5 / Angular 9 - Ошибка при импорте компонента на страницу

0 голосов
/ 29 мая 2020

У меня проблемы с импортом и использованием компонента на странице.

У меня есть компонент с именем 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 {}

Я понял, что этого было достаточно, чтобы можно было использовать компонент на странице, но он продолжает отображать ошибку изображения.

Я ценю любую помощь, которую вы можете мне оказать .

1

1 Ответ

2 голосов
/ 29 мая 2020

Здесь, я думаю, вы запутались между модулем и модулем маршрутизации. Если вы хотите использовать PruebaComponent в другом модуле, вам необходимо импортировать PruebaModule в этот модуль. Предположим, что имя вашего модуля - home.module.ts, тогда вам нужно добавить PruebaModule в home.module.ts, а не в home-routing.module.ts

Итак, в основном ваш home.module.ts должен выглядеть вот так. 

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

и теперь вы можете просто использовать preubaComponent в вашем home-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>
...