要解决Angular路由未渲染子组件,而是渲染父组件的问题,可以使用路由嵌套和子路由的概念。以下是一个解决方法的代码示例:
首先,在父组件的模板文件中,使用
来指定子组件的渲染位置。
父组件
然后,在父组件的路由模块文件中,定义子路由。
// parent-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
const routes: Routes = [
{
path: '',
component: ParentComponent,
children: [
{ path: 'child', component: ChildComponent }
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ParentRoutingModule { }
接下来,创建子组件。
// child.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
template: '子组件
'
})
export class ChildComponent { }
最后,在根模块的路由模块文件中,加载父组件的路由模块。
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'parent', loadChildren: () => import('./parent/parent.module').then(m => m.ParentModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
这样,当访问/parent
时,父组件会被渲染,并且子组件会被渲染在父组件的
位置上,即可解决Angular路由未渲染子组件的问题。