Angular：如何使用多个路由器插座？-Java 学习之路

我有这样的组件

main page:

<div> 
 <a routerLink="alpha"> Alpha </a>
 <a routerLink="beta"> Beta </a>
</div>

<router-outlet></router-outlet>

<footer></footer>

beta template:

<div>
 <a routerLink="/actual">actual</a>
 <a routerLink="/archive">archive</a>
<div>
<router-outlet></router-outlet>

The possible scenario is: 当您单击主页上的BETA按钮时，它会在家中显示路由器插座测试版模板 . 但是beta模板中的路由器插座是空的 . 当我点击测试版模板中的链接时，它会带来组件 .

单击主页上的BETA链接时，测试版页面中的路由器插座不会显示为空，并且会单击实际的传入组件 .

1 回答

例如，如果您希望在导航到 beta 时需要激活某些子路径：

const appRoutes: Routes = [
      { path: 'alpha', component: SomeComponentA},
      { path: 'beta',        
        component: SomeComponentB,
        children: [
           {
               path: 'actual',        
               component: SomeComponentBActual,
           },
           {
               path: 'archive',        
               component: SomeComponentBArchive,
           },
           // add
            {
               path: '',        
               redirectTo: 'actual', pathMatch: 'full',
           },
       ]           

  },         
   ];

因此，当您导航到 beta 时，它将重定向到它的子路径 . CODE EXAMPLE

回复于 2024-05-14T17:47:15+08:00

Angular：如何使用多个路由器插座？

1 回答

相关问题