在嵌套子組件中使用輔助路由

我正在嘗試使用類似於here的問題的子組件中的Auxiliary Routes。由於發佈的「解決方案」更像是一種解決方法，我很好奇如何在上面的博客帖子中做到這一點。在嵌套子組件中使用輔助路由

我在路由器3.1.2上使用Angular 2.1.2。

parent.module

import { NgModule }    from '@angular/core'; 
import { RouterModule }   from '@angular/router'; 
import { BrowserModule }  from '@angular/platform-browser'; 

import { ParentComponent }  from './parent.component'; 

import { ChildModule }   from '../child/child.public.module'; 
import { ChildComponent }  from '../child/child.public.component'; 

import { OtherModule }   from '../other/other.public.module' 


@NgModule({ 
    imports: [ 
     ChildModule, 
     OtherModule, 
     RouterModule.forRoot([ 
      { path: '', component: ChildComponent } 
     ]) 
    ], 
    declarations: [ ParentComponent ], 
    bootstrap: [ ParentComponent ] 
}) 

export class ParentModule { }

parent.component

import {Component} from '@angular/core'; 

    @Component({ 
     selector: 'my-app', 
     template: '<router-outlet></router-outlet>' 
    }) 

export class ParentComponent{ }

child.module

import { NgModule }    from '@angular/core'; 
import { RouterModule}   from '@angular/router'; 
import { CommonModule }   from '@angular/common'; 

import { ChildComponent }  from './child.public.component'; 

import { OtherComponent }  from '../other/other.public.component' 

@NgModule({ 
    imports: [ 
     CommonModule, 
     OtherModule, 
     RouterModule.forChild([ 
      {path: 'other', component: OtherComponent, outlet: 'child'} 
     ]) 
    ], 
    declarations: [ ChildComponent ], 
    exports: [ ChildComponent ], 
}) 
export class ChildModule { }

child.component

import { Component } from '@angular/core'; 

@Component({ 

    selector: 'child-view', 
    template: '<router-outlet name="child"></router-outlet>', 
}) 

export class ChildComponent{}

所以，當我嘗試瀏覽/（子：其他），我得到的典型：

錯誤

Cannot find the outlet child to load 'OtherComponent'

來源

2016-11-20 Usche

我覺得有一點在那裏混亂。

讓我們看看父路徑：

唯一可用的途徑是路徑：「」這將加載child.component

對於孩子的路線

這是在父模塊根本不加載的child.module中。

有幾件事情我會嘗試先： - 指定的出口增加了parent.component - 路由的父路由

看看它是否添加其他組件。一旦你得到它的工作....

負荷child.module通過在主路線這樣做：

{路徑： '孩子'，loadChildren：「應用程序/子。模塊＃ChildModule」}孩子航線的
例如：

{路徑： '其他'，成分：OtherComponent，插座： '方'}

，那麼你可以瀏覽這樣的：

/孩子/（方：等）

，如果你想給它一個嘗試，我得到了在這裏工作的例子： https://github.com/thiagospassos/Angular2-Routing個

乾杯

來源

2016-11-21 23:24:18

至於我可以看到它，這是同樣的解決方案，我在上面提到的這個線程：http：//stackoverflow.com/questions/39893428/auxiliary-router-outlet-inside-primary-router-outlet 事實上，路線是加載由父模塊通過路由器實例（.forChild）。否則，它會爲丟失的路由拋出錯誤。主要的問題是，路由器不知道在哪裏可以找到嵌套的路由器插座。 – Usche

，因爲它沒有被加載它無法找到路由器的出口。嘗試這樣@usche：

RouterModule.forChild([ {path: '', component: ChildComponent}, {path: 'other', component: OtherComponent, outlet: 'child'} ])

這樣孩子就會加載它具有命名出口ChildComponent和「其他」路線的根本途徑將其內部裝載

來源

2016-11-23 04:46:57

這就是我所嘗試的，正如所提到的那樣：無法找到加載'OtherComponent'的outlet子。 – Usche

創建一個plunker，讓你可以看到它的工作。它有一個二級：https://plnkr.co/edit/pSKqvH4vf3HinrZZjWDZ –

在嵌套子組件中使用輔助路由

回答

相關問題