angular – 页面上的多个路由器插座,用于相同的路由

发布时间：2020-12-17 17:28:10 所属栏目：安全来源：网络整理

导读：在我的根组件中,我有以下模板： main class="main" div class="main__container" div class="main__left-area" router-outlet/router-outlet /div div class="main__right-area" router-outlet name="aside"/router-outlet /div /div/main 我想在主路由器插

在我的根组件中,我有以下模板：

<main class="main">
  <div class="main__container">
    <div class="main__left-area">
      <router-outlet></router-outlet>
    </div>
    <div class="main__right-area">
      <router-outlet name="aside"></router-outlet>
    </div>
  </div>
</main>

我想在主路由器插座中加载一些组件,在辅助路由器插座中加载一些其他组件用于相同的路由(当然,我有几条路由).因此,我定义了这样的路线：

export const AppRoutes: Routes = [
  {
    path: "",component: HomeSummaryComponent
  },{
    path: "",component: AskSummaryComponent,outlet: "aside"
  },{
    path: "payments",component: PaymentComponent
  },component: DataSummaryComponent,outlet: "aside"
  }
];

当页面加载时,它运行良好,我在主路由器插座中有HomeSummaryComponent,在旁边路由器插座中有AskSummaryComponent.但是,在导航中,我有这个：

<a routerLink="/payments" class="navigation__link">Payments</a></span>

当我点击此链接时,主路由器插座的内容将由PaymentComponent替换,但旁边的路由器插座仍会显示AskSummaryComponent.

我还试图通过“/ payements-aside”重命名第二个“付款”路线,并将链接替换为：

<a routerLink="/payments(aside:payments-aside)" class="navigation__link">Payments</a>

但它仍然无效.但是,当我直接访问http：// localhost：8083 / payments(除了：付款旁),它确实有效,但这个URL并不是真正干净…它不能用于面向公众的网站,因为.

有没有人知道如何实现这个简单的需求？

解决方法

以下对我有用

{
       path: 'customers',canActivate: [AuthGuard],children: [
       {
          path: '',component: CustomersComponent,outlet: 'main'
       },{
          path: '',component: SideBarComponent,outlet: 'sideBar'
       }
     ]
    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!