Angular 更换选项卡中的组件

在generic ionic tabs模板中，我试图用一个组件替换tab 2。尽管导入了PeopleComponent，我还是不断遇到此错误：

我的错误：

ERROR Error: Uncaught (in promise): Error: Component PeopleComponent is not part 
of any NgModule or the module has not been imported into your module.
Error: Component PeopleComponent is not part of any NgModule or the module has 
not been imported into your module.

人员组件非常简单，不会给出错误。我已尝试从其中一个删除导入，但不起作用。不知道该怎么办

应用程序模块：

...
@NgModule({
  declarations: [
  ...
  PeopleComponent,
]
...

选项卡路由模块：

import { PeopleComponent } from './../path/people/people.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
 {
    path: 'tabs',
    component: TabsPage,
    children: [
 {
    path: 'tab1',
    loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
  },
  {
    path: 'tab2',
    component: PeopleComponent
    // loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
  },
  {
    path: 'tab3',
    loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
]
},
{
   path: '',
   redirectTo: '/tabs/tab1',
   pathMatch: 'full'
}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

导出类TabsAgeoutingModule{}

选项卡模块：

import { PeopleComponent } from './../path/people/people.component';
import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { TabsPageRoutingModule } from './tabs-routing.module';

import { TabsPage } from './tabs.page';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule,
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

编辑： 与其执行下面提到的操作，不如删除ionic tabs starter模板创建的不需要的模块

下面是我所做的工作，它删除了不必要的模块，使应用程序更简单

您可以对应用程序执行类似的操作，并使其更简单

旧答案 您必须在

TabsPageModule

的

声明中添加
PeopleComponent
，而不是
AppModule

问题是
TabsPageModule
不知道
PeopleComponent
，因为它已在
AppModule
中声明。除非您在AppModule中导出
PeopleComponent
，并在
TabsPageModule
中导入AppModule，
PeopleComponent
将无法使用

不要像第一行提到的那样执行所有这些操作，只需从
AppModule
声明中删除
PeopleComponent
，并将其添加到
TabsPageModule
编辑中的声明中：
与其执行下面提到的操作，不如删除ionic tabs starter模板创建的不需要的模块

下面是我所做的工作，它删除了不必要的模块，使应用程序更简单

您可以对应用程序执行类似的操作，并使其更简单

旧答案
您必须在
TabsPageModule
的
声明中添加
PeopleComponent
，而不是
AppModule

问题是
TabsPageModule
不知道
PeopleComponent
，因为它已在
AppModule
中声明。除非您在AppModule中导出
PeopleComponent
，并在
TabsPageModule
中导入AppModule，
PeopleComponent
将无法使用

不要像第一行提到的那样做所有这些，只需从
AppModule
声明中删除
PeopleComponent
，并将其添加到
TabsPageModule
中的声明中。谢谢您的回答，我选择了第二个选项，因为我正在其他地方使用PeopleComponent。我得到了这个错误：error-error:Uncaught（在promise中）：error:RouterModule.forRoot（）调用了两次。延迟加载的模块应改为使用RouterModule.forChild（）。错误：RouterModule.forRoot（）调用了两次。延迟加载的模块应该改为使用RouterModule.forChild（）。Tabs starter模板的问题在于，它添加了不必要的模块。不需要为
TabsPage
和单个选项卡设置模块。最好删除这些模块，并直接在父路由模块中声明选项卡和路由。@DarrowHartman我已更新了答案，以显示如何编辑当前结构并删除不必要的模块。检查这是否有助于您并解决您的问题。感谢您的回答，我选择了第二个选项，因为我正在其他地方使用PeopleComponent。我得到了这个错误：error-error:Uncaught（在promise中）：error:RouterModule.forRoot（）调用了两次。延迟加载的模块应改为使用RouterModule.forChild（）。错误：RouterModule.forRoot（）调用了两次。延迟加载的模块应该改为使用RouterModule.forChild（）。Tabs starter模板的问题在于，它添加了不必要的模块。不需要为
TabsPage
和单个选项卡设置模块。最好删除这些模块，并直接在父路由模块中声明选项卡和路由。@DarrowHartman我已更新了答案，以显示如何编辑当前结构并删除不必要的模块。检查这是否有助于您并解决您的问题。在选项卡模块中，将PeopleComponent添加到导入。在选项卡模块中，将PeopleComponent添加到导入。