分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angular – 页面上的多个路由器插座,用于相同的路由，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

<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'
       }
     ]
    }