Как импортировать компонент на две страницы?

Question

У меня есть такая структура:

• home - страница
• home2 - страница
• test-component - component

Мне нужно иметь возможность использовать компонент (<app-test-component></app-test-component>) на обеих страницах.

Если я просто использую тег:

Ошибка: Uncaught (в обещании):Ошибка: Ошибки синтаксического анализа шаблона: «app-test-component» не является известным элементом:

Если я просто импортирую (import {TestComponentComponent} from '../test-component/test-component.component') в home.module.ts и вставлю его в импорт модуля:

core.js: 9110 ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: неожиданная директива 'TestComponentComponent', импортированная модулем 'HomePageModule'. Добавьте аннотацию @NgModule.

Аналогичная ошибка при добавлении в объявления.

Git.

Как импортировать компонент вобе страницы и использовать?

Answer 1

Есть несколько изменений, которые вы должны сделать:

1. Вы не должны импортировать component, как я вижу в коде.

2. Измените структуру проекта и переместите повторно используемый компонент, такой как TestComponent, в общий компонент. Ниже приведен пример, в котором я создал имена общих модулей как TestModule

/app
  /home
   -home.component.ts
   -home.module.ts

  /test
   -test.component.ts
   -test.module.ts

-app.component.ts
-app.module.ts

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HomeModule, RouterModule.forRoot([{ path: '', component: HomeComponent }])],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

test.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestComponent } from './test.component';

@NgModule({
  declarations: [TestComponent],
  exports: [TestComponent],
  imports: [CommonModule],
})
export class TestModule {}

home.module.ts

@NgModule({
  declarations: [HomeComponent],
  exports: [HomeComponent],
  imports: [
    CommonModule,
    TestModule
  ]
})
export class HomeModule { }

Этот наборструктуры проекта, безусловно, поможет вам повторно использовать test.module функций. Дайте мне знать, если вам нужно больше кода.

Answer 2

Объявите TestComponentComponent только в home.module.

home.module.ts

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage, TestComponentComponent]
})
export class HomePageModule {}

app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}