Угловой 2 - детский компонент в родительском маршрутизаторе

Question

В настоящее время я пытаюсь реализовать приложение с угловым 2 с несколькими уровнями навигации. Проблема заключается в том, что мои дочерние компоненты не могут найти выход маршрутизатора, если он явно не указан в родительском компоненте из моих маршрутов.

Это сообщение об ошибке я получаю:

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

Я хочу что-то вроде редактирования или детальный вид, который показывает вместо представления списка при нажатии на кнопку или ссылку. Представления встроены в макет шаблона, который имеет структуру навигации и предоставляет выход для роутера для контента. Я также хочу настроить таргетинг на этот маршрутизатор со всеми моими взглядами. Я уже пробовал использовать названные торговые точки, но безуспешно. Я использую компонент breadcrumb для отображения текущего маршрута, поэтому я не могу сделать представление редактирования/подробного описания частью моего компонента списка.

Для того, чтобы было более понятно, я сделал plunker демо:

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

Как я могу решить эту проблему на выходе и предназначаться маршрутизатор-выход компоновщика из дочерних компонентов?

Answer 1

Одним из решений может быть просто обернуть все в вашем шаблоне UsersComponent, кроме router outlet в div. Затем скройте/покажите, что div соответственно, если у компонента есть дети (UsersEditComponent в этом случае) или нет.

Это позволяет вашему маршрутизатору поддерживать правильную иерархию родителя/ребенка между 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; 
    } 
    } 
}