多路由器出口

在我的根组件，我有以下的模板：多路由器出口

<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>

我想加载一些组件在主router-outlet和其他一些成分在二级router-outlet为相同的路线（当然，我有几条路线）。因此，我定义我的路线是这样的：

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

页面加载时，它工作得很好，我在初级router-outlet的HomeSummaryComponent并在一旁router-outlet的AskSummaryComponent。然而，在导航，我有这样的：

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

当我点击这个链接，主router-outlet的内容得到由PaymentComponent替换，但在一旁router-outlet仍显示AskSummaryComponent。

我也试图通过重命名“/ payements预留”第二个“金”航线，并更换链接：

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

但它仍然无法正常工作。但是，当我直接访问http://localhost:8083/payments(aside:payments-aside)时，它确实有效，但这个URL并非真正干净......它不能用于面向公众的网站，因为。

有没有人有关于如何实现这个简单需求的想法？

来源

2017-03-02 ssougnez

对于那些谁有兴趣，我终于解决了这个问题，我自己的路。我使用Madhu Ranjan in here描述的执行MasterComponent来实现这个运行：http://plnkr.co/edit/NNufpBkvXD6B5S6A8HT4。长话短说，我使用路由配置来创建每个页面的组成，然后Aggregator组件使用此配置将组件注入到正确的位置。这不是非常通用的，但我认为它可以改进。

来源

2017-03-05 13:06:44 ssougnez

你能尝试以下语法导航到PaymentComponent疏通aside插座：

<a [routerLink]="[{ outlets: { primary: 'payments', aside: null }}]"> Payments</a>

来源

2017-03-02 19:14:53 AngularChef

嗨，什么也不做。然而，我用'Payments'取代了这个链接，它可以工作，但仅仅是因为我被重定向到了'http：// localhost：8083/payments（旁边：付款）'。但是，正如我在原文中所说的，我不希望URL包含这样的内容。人们可以改变它，我不想要它。我正在探索另一个想法，但随时为我提出解决方案。我宁愿使用“本地”的东西。 – ssougnez

我不确定我是否遵循（另外，看起来您已将原始问题与现在之间的几件事重新命名）。点击“付款”时，您的最终目标不是刷新主要渠道并清除旁边的渠道吗？如果是的话，如果你想清除它，为什么你会提供一个“搁置”的路径？ – AngularChef

对不起，如果我不清楚。主要目标是具有两个（或更多）'router-outler'的根组件。然后，感谢路由配置，我定义了我的网站的其他页面。例如，路径“/”必须在“主”插座中显示“componentA”，在“旁边”中显示“componentB”。当我导航到“/ other”时，我想在“主”插口显示“componentC”，在“旁边”显示“componentD”。我想通过路线撰写我的网页。这样，当我点击一个链接时，所有'router-outlets'内容都被替换了。而且我不想要URL（例如：'aux'）。 – ssougnez

以下为我工作

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

来源

2017-09-10 07:40:21

多路由器出口

回答

相关问题