在Angular中,可以通过配置多个路由出口来实现多出口路由。以下是一个示例解决方法:
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'home', component: HomeComponent, outlet: 'primary' },
{ path: 'about', component: AboutComponent, outlet: 'primary' },
{ path: 'contact', component: ContactComponent, outlet: 'secondary' }
];
上述代码中,路由对象中的outlet属性指定了路由的出口。在这个示例中,'primary'和'secondary'分别是两个不同的路由出口。
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppModule { }
import { Router } from '@angular/router';
constructor(private router: Router) {}
navigateToContact() {
this.router.navigate([{ outlets: { primary: 'home', secondary: 'contact' }}]);
}
上述代码中,使用了navigate方法的第一个参数是一个数组,数组中的每个对象都表示一个路由出口和对应的路径。在这个示例中,导航到'home'路径的组件将会显示在名为'primary'的路由出口中,导航到'contact'路径的组件将会显示在名为'secondary'的路由出口中。
通过以上步骤,就可以实现Angular中的多出口路由。
上一篇:Angular多插槽投影和指令
下一篇:Angular多次订阅后执行操作