无法在父 component.html 中添加第二个路由器出口以在路由中显示嵌套子级

Question

我有一个 Angular 版本 (11) 应用程序， 一个 app.module，它导入我定义了所有路由的 app.routing.module.ts， 这是路由模块的代码

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { MainComponent } from './main/main.component';
import { EditOrDeleteComponent } from './main/editOrDelete/edit-or- 
delete.component';

const routes: Routes = [
{path: '', pathMatch: 'full', component: MainComponent},
{
path: 'home', component: HomeComponent, data: { animation: 'home' }, 
children: [
{path: '', component: EditOrDeleteComponent}
]
},
 { path: 'about', component: AboutComponent, data: { animation: 
'about' } },
{ path: '**', redirectTo: ''}
];

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

export class AppRoutingModule { }

和 App.module

 import { BrowserAnimationsModule } from '@angular/platform- 
 browser/animations';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';

 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';




  @NgModule({
         declarations: [
         AppComponent,
         ],

        imports: [
          BrowserModule,
          BrowserAnimationsModule,
          AppRoutingModule
          ],
          providers: [],
          bootstrap: [AppComponent]
          })
          export class AppModule { }

在 HomeComponent html 文件中，我需要第二个路由器插座来显示子组件 EditOrDeleteComponent，但我收到“'路由器插座'不是已知元素的错误：

1. 如果 'router-outlet' 是一个 Angular 组件，则验证它是该模块的一部分。” 每次我尝试添加第二个<router-outlet></router-outlet>， 我试图理解这个问题已经 4 小时了， 谁能帮帮我，

Answer 1

您错过了在路由器模块中的声明[]数组中注册组件。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { MainComponent } from './main/main.component';
import { EditOrDeleteComponent } from './main/editOrDelete/edit-or- delete.component';

const routes: Routes = [
    {path: '', pathMatch: 'full', component: MainComponent},
    { path: 'home', 
      component: HomeComponent, 
      data: { animation: 'home' }, 
      children: [
          {path: '', component: EditOrDeleteComponent}
      ]
    },
    { path: 'about', 
      component: AboutComponent, 
      data: { animation: 'about' } 
    },
    { path: '**', redirectTo: ''}
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    declarations: [HomeComponent, AboutComponent, MainComponent, EditOrDeleteComponent]
})

export class AppRoutingModule { }

Stackblitz - https://stackblitz.com/edit/angular-ivy-to3v9f?file=src/app/app.routing.module.ts