多路由器出口

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

<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

多路由器出口

回答

相關問題