替换选项卡路由角离子中的组件

Question

在通用离子标签模板中，我试图用一个组件替换标签 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.

People 组件非常简单，不会出错。我曾尝试从其中一个或另一个中删除导入，但这不起作用。不知道该怎么办。

应用模块：

...
@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]
})

导出类 TabsPageRoutingModule {}

标签模块：

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

Answer 1

编辑：

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

这是我所做的commit，它删除了不必要的模块并使应用程序更简单。

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

旧答案

您必须在TabsPageModule 的declarations 中添加PeopleComponent，而不是AppModule。

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

不要像第一行提到的那样做所有这些，只需从 AppModule 声明中删除 PeopleComponent 并将其添加到 TabsPageModule 中的声明中。