Angular2で子ルートを設定する際の問題

Question

構造全体を整理しようとしている間に、実際のビジネスロジックに飛び込むことができるので、次の問題に遭遇しました。

私はそれが定義されたルートだと、メインコントローラがあります：あなたが見ることができるようにapp-headerディレクティブがあり

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <app-header></app-header> 
      <secure-outlet signin="Login" unauthorized="AccessDenied"></secure-outlet> 
     </div> 
    </div> 
</div> 

次のようにそれが見え含ま：

@Component({ 
    selector: 'priz-app', 
    moduleId: module.id, 
    templateUrl: './app.component.html', 
    directives: [ROUTER_DIRECTIVES, SecureRouterOutlet, AppHeader], 
    providers: [AuthenticationService] 
}) 
@RouteConfig([ 
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true }, 
    { path: '/login', name: 'Login', component: LoginComponent }, 
    { path: '/logout', name: 'Logout', component: LogoutComponent }, 
    { path: '/rrm/...', name: 'Rrm', component: RrmMainComponent } 
]) 

とそのコントローラのテンプレートを次のとおりです。

@Component({ 
    selector: 'app-header', 
    moduleId: module.id, 
    templateUrl: './app-header.component.html', 
    directives: [Collapse, DROPDOWN_DIRECTIVES, ROUTER_DIRECTIVES, TrackScrollDirective] 
}) 

そして、その中のどこかのテンプレート：

RrmMainComponentはこのようになります

<a [routerLink]="['RrmMain']">RRM <span class="sr-only">(current)</span></a> 

：

@Component({ 
    selector: 'rrm-main', 
    moduleId: module.id, 
    templateUrl: './rrm-main.component.html', 
    directives: [ROUTER_DIRECTIVES, SecureRouterOutlet] 
}) 

@RouteConfig([ 
    {path: '/', name: 'RrmMain', component: RrmMainComponent, useAsDefault: true, data: { roles:['ROLE_RRM_USER', 'ROLE_RRM_USER'] }} 
]) 

すべて良いが、私は例外を取得しています：

例外：ルーターのインスタンス化中にエラーを！ （RouterLink - > ルーター）。 angular2.js：23887例外： ルータのインスタンス化中にエラーが発生しました。 （RouterLink - > Router）。 angular2.js：23877：9

オリジナルの例外：「/」には子供のルートは許可されません。親のルートパス で "..."を使用してください。

私は考えることができるものを試しましたが、私はこの時点で固執しています。単にまだ十分な経験がありません。

ありがとう、 アレックス。

Answer 1

ギュンター・ゼシュバウアー。

プランナーを作成していただきありがとうございます。それが原因で私は問題が何かを理解することができました。

明らかに、ルートルート設定の親と子供の設定では、同じコンポーネントを参照していました。 私はそのようなラッピングコンポーネントを作成したら：

@Component({ 
    selector: 'rrm', 
    moduleId: module.id, 
    templateUrl: './rrm.component.html', 
    directives: [ROUTER_DIRECTIVES, SecureRouterOutlet] 
}) 

@RouteConfig([ 
    {path: '/', name: 'RrmMain', component: RrmMainComponent, useAsDefault: true, data: { roles:['ROLE_RRM_USER', 'ROLE_RRM_USER'] }} 
]) 

注、ここで私は別のコンポーネントではなく、自分自身をリンクしていていることを。

とアプリのコンポーネントからそれを参照：

{ path: '/rrm/...', name: 'Rrm', component: RrmComponent } 

はすべてが魅力のように働きました！

ありがとう、