親ルーターのアウトレットに角2の子コンポーネントがあります

Question

現在、複数のナビゲーションレベルを持つ角度2のアプリケーションを実装しようとしています。 問題は、ルートから親コンポーネントに明示的に宣言されていないときに、子コンポーネントがルーターのコンセントを見つけることができないことです。

Unhandled Promise rejection: Cannot find primary outlet to load 'EditUserComponent' 

私はボタンやリンクをクリックすると、代わりに、リストビューの示し編集または詳細ビューのような何かをしたい：

これは私が取得エラーメッセージです。 ビューはナビゲーション構造を持ち、コンテンツのルーターアウトレットを提供するテンプレートレイアウトに埋め込まれています。私はまた、私のすべてのビューでこのルータのアウトレットをターゲットにしたい。名前付き店舗を使ってみましたが、成功しませんでした。 現在のルートを表示するためにパンくずリストコンポーネントを使用しています。したがって、編集/詳細ビューをリストコンポーネントの兄弟にすることはできません。

https://embed.plnkr.co/XXxADnS7q8FCfF4W84tS/

がどのように私は出口の問題を解決し、子コンポーネントからレイアウトのルータ・コンセントをターゲットにすることができます：

はそれをより明確にするために、私はplunkerデモを作ったのですか？

Answer 1

テンプレートのすべてを、router outlet（div）以外の単純なものにすることができます。コンポーネントに子供がある場合（この場合はUsersEditComponent）、それに応じてdivを非表示にします。

これは、ルータがUsersComponentとUsersEditComponentの間に正しい親/子階層を維持することを可能にしますが、そのルートがアクティブになったときにはまだUsersEditComponentのコンテンツしか表示しません。

これはまさにそのUsersComponentの実装は次のとおりです。

import { Component, OnInit } from '@angular/core'; 
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; 

@Component({ 
    template: 
    `<div *ngIf="!hasChildren"> 
    User 1 <button md-icon-button (click)="editUser(1)">edit</button><br/> 
    User 2 <button md-icon-button (click)="editUser(2)">edit</button> 
    </div> 
    <router-outlet></router-outlet> 
    ` 
}) 

export class UsersComponent implements OnInit { 
    private hasChildren: bool; 
    constructor(private router: Router, private route:ActivatedRoute) { } 

    editUser(id) { 
    this.router.navigate(['users/edit', id]); 
    } 

    ngOnInit() { 
    this.hasChildren = false; 
    this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => { 
     this.hasChildren = this.route.children.length > 0; 
    } 
    } 
}