title: (Routable Component) Data tree with adjacent detail pane
body: <p>We're building an Angular 2 application with a navigable tree (on the left), and an adjacent detail pane (on the right).</p>
  
  <p>I want to render about 20-30 different components in the same detail area, depending on what node on the tree is selected.</p>
  
  <p><strong>To send many components to the same <code>RouterOutlet</code> it seems I have to load all those components in the same parent component where the outlet is defined; I'd prefer not to have a monolithic top-level component like that.</strong></p>
  
  <p>In case that isn't clear, the rest of this describes in more detail my scenario, and then restates the same question at the end.</p>
  
  <p>The tree can only have one node selected at a time. When a node is selected, all other non-parent nodes are closed, and the list of children for the selected node are loaded over the network and display beneath the selected node. The detail information related to the selected node is also loaded over the network, and rendered in the shared right pane area, replacing any other information that was previously displayed there.</p>
  
  <p>Different nodes represent different application features and contain different entity types. Therefore, various nodes of the tree require both:</p>
  
  <ul>
  <li>different child templates/components to expand the child tree (some tree nodes enumerate contact names, others contain appointments, etc.)</li>
  <li>different templates/components loaded in the detail pane</li>
  </ul>
  
  <p>Here is an example:</p>
  
  <ul>
  <li>appointments
  
  <ul>
  <li>Joe  11am</li>
  <li>Sue  12am</li>
  </ul></li>
  <li>people
  
  <ul>
  <li>Joe Smith</li>
  <li>Sue Li <strong>(selected)</strong>
  
  <ul>
  <li>3 days ago</li>
  <li>5 days ago</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>The detail panel would show information about Sue Li.</p>
  
  <p>We are currently using our Primary Routes to operate the tree. We call <code>CanActivate</code> to wait for the child node's data to be resolved before rendering its Routable Component. Then we manipulate the DOM to graft the node on the tree immediately after it is rendered. The tree works by itself. I like that the application's main URL navigation is driven as I'd expect by the route tree; although I'd welcome alternate suggestions.</p>
  
  <p>We are <em>attempting</em> to use Aux Routes to display the correct detail pane template. The relevant tree nodes understand how to "initiate" the correct detail pane using a simple Aux Route. However, we have two problems:</p>
  
  <ol>
  <li><p>Aux Routes don't support <code>CanActivate</code>, so until the <code>@Resolve</code> decorator is available in Angular 2, we can't easily delay render for Aux Components until data is resolved. This is a low-priority issue, since it will be fixed with the Angular release.</p></li>
  <li><p>All the detail Aux Components must be loaded in one parent component, so they can each overwrite the same parent Aux <code>RouterOutlet</code>. Is there another way to do this that doesn't require such a massive top-level component?</p></li>
  </ol>