将类应用于嵌套的angular9的不同html路由

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'child1', component: Child1Component },
      { path: 'child2', component: Child2Component },
      // 其他子路由配置
    ]
  }
];

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  // 父组件的类代码
}

@Component({
  selector: 'app-child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.css']
})
export class Child1Component {
  // 子组件1的类代码
}

@Component({
  selector: 'app-child2',
  templateUrl: './child2.component.html',
  styleUrls: ['./child2.component.css']
})
export class Child2Component {
  // 子组件2的类代码
}

<!-- parent.component.html -->
<div>
  <h1>Parent Component</h1>
  <router-outlet></router-outlet>
</div>

<!-- parent.component.html -->
<div>
  <h1>Parent Component</h1>
  <ul>
    <li><a routerLink="/parent/child1">Child 1</a></li>
    <li><a routerLink="/parent/child2">Child 2</a></li>
  </ul>
  <router-outlet></router-outlet>
</div>

const routes: Routes = [
  { path: '', redirectTo: '/parent', pathMatch: 'full' },
  { path: 'parent', component: ParentComponent }
];

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