Angular 4-子路线并使用两个路线出口

Question

我已经在门户网站上阅读了与此有关的所有解决方案，但是找不到正确的解决方案。事情是这样的：

我有一个组成部分：

setState

和两个子组件：

select(event) {
  const sortBy = event.target.innerText;
  const sortByParam = sortBy.toLowerCase();
  this.setState({
    sortBy,
    dives: [...this.state.dives.sort(Utilities.sortByParam(sortByParam))];
  });
}

当您单击ComponentOne路由时，我想实现的目标是将我重定向到包含两个带有另一个路由器出口的模板的两个子组件。

这是路线的外观：

import {Component} from '@angular/core';

@Component({
  selector: 'component-one',
  template: 'Component One'
})
export class ComponentOne { 

}

在app.component.html中，我有：

import { Component } from '@angular/core';

@Component({
  selector: 'child-one',
  template: 'Child One'
})
export class ChildOne { 
}

import { Component } from '@angular/core';

@Component({
  selector: 'child-two',
  template: `

    <nav>
      <a [routerLink]="['child-one']">Child One</a><br />
      <a [routerLink]="['child-two']">Child two</a><br />
    </nav>
  <router-outlet></router-outlet>
  `
})
export class ChildTwo { 
}

我遇到的错误是： 未抓到（按承诺）：错误：找不到要加载“ ChildTwo”的主要出口 错误：找不到要加载“ ChildTwo”的主要出口

有人知道问题出在哪里吗？我在两个子组件以及app.component中添加了路由器插座。

如果有人需要知道，这是应用程序的结构： 谢谢！

Answer 1

注释中已解决，您的ComponentOne需要一个<router-outlet>。您在路由器配置中告诉Angular ComponentOne有子级（子级路由），但是没有可渲染的子级。

有时候您不会立即看到问题-但您在''上具有fullRedirect，因此问题状态会立即触发。

简而言之，如果给定的路由配置中有子级，则该组件需要路由器出口。