angular2目標特定路由器插座

我有一個應用程序具有用作整個應用程序基礎的基本路由器插座。那麼一個用戶登錄後使用的子路由器插座將顯示由於單擊基於基本路由器插座點擊的導航鏈接而導致加載的任何組件。我希望能夠在基本模板中單擊導航鏈接時能夠定位子路由器插座。angular2目標特定路由器插座

當我單擊基本模板中的導航項時，它將組件加載到基本路由器插座中。這對我來說很有意義。我想知道如何點擊基本模板中的導航項，並在子路由器插座中加載所需的組件。

我無法找到目標爲名爲路由器的出口就像我可以在RC4做任何的信息（我認爲這是RC4）時，我曾經是能夠做到像：

[routerLink]="/childroute#secureRouterOutlet"

這裏是一個非常簡單的蹦牀，模仿目前的設置：plunkr

來源

2016-11-08 JakeHova

我想知道我可以在基本模板點擊導航項目，必須在子路由器出口所需的組件負載

你能夠通過嵌套的途徑實現這一目標，您需要在Routes上設置children財產。這裏是doc。

下面是它是如何完成的，特定於您的用例來自plunkr。

在src/app.ts指定您想在Routes配置中添加爲子項的任何組件。例如，在ChildComponent添加Child2Component嵌套的路線就會像下面

export const ROUTES: Routes = [ 
    { 
     path: '', 
     component: HomeComponent 
    }, 
    { 
     path: 'child', 
     component: ChildComponent, 
     children : [ 
      { path: 'child2', component: Child2Component } 
     ] 
    }, 
    { 
     path: 'home',  
     component: HomeComponent 
    } 
];

在導航，您需要將鏈接如下

<a [routerLink]="['/child', 'child2']">Go to Child - Child2</a>

添加到Child2Component現在，當你點擊該鏈接，ChildComponent將呈現內router-outletChild2Component模板ChildComponent

這裏工作plunkr

來源

2016-11-08 01:35:54 Michael

我的問題是，我很困惑輔助路線的兒童路線。路由器出口在遍歷樹時被填充組件。因此，第一個路徑匹配將在第一個路由器插座中進行，子路由匹配將在下一個路由器插座中進行，等等。輔助路線是不同的。當您在同一頁面上有兩個路由器插座並且您想要指定一個特定路由器時，則可以使用/ path（routeroutletname：pathtocomponent）的命名router-outlet格式。 Angular 2路由器v3的功能非常強大，並且在開始時將頭部纏繞起來有點複雜。 – JakeHova

相關提示@JakeHova – Michael

請嘗試這樣寫，希望它有幫助。

<a [routerLink]="['/childroute#secureRouterOutlet']">

來源

2016-11-08 01:03:23

我試過了，但它看起來不像那些作品。我將router-outlet命名爲「secureRouterOutlet」，然後將導航鏈接更改爲您擁有的方式，但不起作用。我知道，之前的RC版本曾經工作過，但我無法再繼續工作了。 – JakeHova

angular2目標特定路由器插座

回答

相關問題