在Angular中,可以使用路由器的RouterOutlet
指令和路由器的Router
服务来实现相同路由切换组件视图。下面是一个包含代码示例的解决方法:
app.component.ts
)中,导入Router
服务和ActivatedRoute
服务:import { Router, ActivatedRoute } from '@angular/router';
Router
和ActivatedRoute
服务:constructor(private router: Router, private route: ActivatedRoute) {}
RouterOutlet
指令在根组件的模板中创建一个占位符,用于显示不同组件的视图:
Router
服务的navigate
方法来切换组件视图。在需要切换视图的地方,调用以下代码:this.router.navigate(['/same-route'], { relativeTo: this.route });
上述代码中,/same-route
是要导航到的相同路由路径。使用relativeTo
选项来指定相对于当前路由的路径。
/same-route
路径配置一个路由。在app-routing.module.ts
文件中,添加以下路由配置:import { SameRouteComponent } from './same-route.component';
const routes: Routes = [
{ path: 'same-route', component: SameRouteComponent }
];
确保SameRouteComponent
是要在/same-route
路径下显示的组件。
这样,每当调用this.router.navigate(['/same-route'], { relativeTo: this.route })
时,Angular将切换到SameRouteComponent
组件的视图,同时保持相同的路由路径。