如何将一个组件导入两个页面？

Posted 2023-03-13

【中文标题】如何将一个组件导入两个页面？

【英文标题】：How to import a component into two pages?

【发布时间】：2020-02-13 12:17:59

【问题描述】：

我有这样的结构：

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

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

如果我只使用标签：

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

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

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

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

Git.

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

【问题讨论】：

isherwood，你的意思是在 app.component.ts 中吗？我导入了，没有任何变化。

Imported (import TestComponentComponent from './test-component/test-component.component'), declarat(declarations: [AppComponent, TestComponentComponent],), 同样的错误 (core.js:9110错误错误：未捕获（承诺中）：错误：模块'HomePageModule'导入的意外指令'TestComponentComponent'。请添加@NgModule注释。）。我更新了 github 示例。

不是这样的，我在官方文档中没有找到这个。但是我看到了几个问题，结果证明将组件导入到几个页面上，关于在这些问题中可以看到不同版本的包。你能在 ionic 上做一个简单的例子，我在哪里可以得到我想要的或者你的这个任务的版本？

重新打开，因为不清楚问题是什么。这是潜在的重复：***.com/questions/43603515/…

2 年零 5 个月前询问 - 这是不同的版本

【参考方案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 

【讨论】：

如果你导入到两个页面中，那么其中一个页面将真正起作用。转到第二页时会出现错误。 （错误错误：未捕获（承诺中）：错误：类型 TestComponentComponent 是 2 个模块声明的一部分：HomePageModule 和 Home2PageModule！请考虑将 TestComponentComponent 移动到导入 HomePageModule 和 Home2PageModule 的更高模块。您还可以创建一个新的 NgModule 导出并包含 TestComponentComponent 然后在 HomePageModule 和 Home2PageModule 中导入该 NgModule。）

【参考方案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的特性。如果您需要更多代码，请告诉我。

【讨论】：

谢谢，您的选择有效！我尝试了一个类似的选项，但它声明并且出现错误。每个需要示例的人都会在 git 上。