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;
    }
  }
}

Angular 2 - 父母路由器插座中的儿童组件

1 个答案: