Question

我有这样的结构：

主页-页面
home2-页面
测试组件-组件

我需要能够在两个页面上都使用组件（<app-test-component></app-test-component>）。

如果我只使用标签：

错误错误：未捕获（承诺）：错误：模板解析错误： “ app-test-component”不是已知元素：

如果我只是将（import {TestComponentComponent} from '../test-component/test-component.component'）导入home.module.ts并将其放入模块import中：

core.js：9110错误错误：未捕获（承诺中）：错误：意外模块导入的指令“ TestComponentComponent” “ HomePageModule”。请添加@NgModule批注。

如果添加到声明中，也会出现类似错误。

Git.

如何在两个页面上导入组件并使用？

Answer 1

仅在home.module中声明TestComponentComponent。

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 {}

Answer 2

您应该做的更改很少：

您不应导入代码中的component。
重新排列项目结构，并将可重用组件（例如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功能。让我知道您是否需要更多代码。

如何将组件导入两页？

2 个答案: