替换选项卡路由中的组件 Angular Ionic

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

导出 class 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 入门模板创建的不需要的模块。

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

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

旧答案

您必须在 TabsPageModule 的 declarations 内添加 PeopleComponent 而不是 AppModule.

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

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

中的声明中

替换选项卡路由中的组件 Angular Ionic

Replacing Component in Tabs Routing Angular Ionic

angular

ionic-framework

routes

angular2-routing

编辑：

旧答案