在Angular中,要导航到模块内的子组件,可以按照以下步骤进行:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
@NgModule({
declarations: [
ParentComponent,
ChildComponent
],
exports: [
ParentComponent,
ChildComponent
],
imports: [
CommonModule,
RouterModule
]
})
export class MyModule { }
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{
path: 'child',
component: ChildComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MyRoutingModule { }
router-outlet
标记来加载子组件。
Parent Component
Router
服务进行导航。import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {
constructor(private router: Router) { }
navigateToChild() {
this.router.navigate(['child'], { relativeTo: this.route });
}
}
现在,当你点击父组件中的按钮时,应该会导航到子组件。确保在根模块或特性模块中导入和配置 MyRoutingModule
。