在Angular 6中,当使用路由导航时,目标组件中无法渲染子组件的问题通常是由于未正确配置路由和模板导致的。以下是解决该问题的步骤和代码示例:
// 导入所需的模块和组件
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
// 定义路由配置
const routes: Routes = [
{ path: '', redirectTo: '/parent', pathMatch: 'full' },
{ path: 'parent', component: ParentComponent },
{ path: 'child', component: ChildComponent }
];
// 导入路由模块并配置路由
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
来渲染子组件。
Parent Component
// parent.component.ts
import { Router } from '@angular/router';
export class ParentComponent {
constructor(private router: Router) {}
navigateToChild() {
this.router.navigate(['/child']);
}
}
Child Component
This is the child component.
通过以上步骤和代码示例,你可以在目标组件中成功渲染子组件。确保在路由模块中正确配置路由,并在父组件的模板中使用
来渲染子组件。