Angular 2 - 父路由器导出中的子组件

Question

我目前正在尝试实现具有多个导航级别的 Angular 2 应用程序。 问题是当我的子组件没有在我的路由的父组件中明确声明时，我的子组件找不到路由器导出。

这是我得到的错误信息:

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

我想要类似编辑或详细 View 的东西，当我单击按钮或链接时显示而不是 ListView 。 这些 View 嵌入在具有导航结构并为内容提供路由器导出的模板布局中。我也想用我所有的观点来定位这个路由器 socket 。我已经尝试使用命名网点但没有成功。 我使用面包屑组件来显示当前路线，因此我无法将编辑/详细信息 View 设为我的列表组件的同级 View 。

为了更清楚，我做了一个plunker demo:

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

如何解决 socket 问题并从子组件定位布局的路由器 socket ？

Answer 1

一个解决方案可能是将所有内容简单地包装在您的 UsersComponent 模板中，除了 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;
    }
  }
}