title: How do you navigate from a sub component in Angular Dart 2?
body: <p>I have three components: <code>Summary</code>, <code>CategorySummary</code> and <code>Category</code>. <code>CategorySummary</code> is a subcomponent of <code>Summary</code>. I've got routes defined for <code>Summary</code> and <code>Category</code> and can navigate between the two of them via <code>[routerLink]</code>.</p>
  
  <p>The problem is that I can't navigate from <code>CategorySummary</code> (the sub-component) to <code>Category</code>. If I put <code>[routerLink]</code> in the template I see the correct URL when I hover over the link. Clicking the link correctly updates the URL in the browser, but the page doesn't change.</p>
  
  <p>The symptoms are the same if I try to navigate via <code>router.navigate</code>.</p>
  
  <p>How do I navigate from a subcomponent?</p>
  
  <p>Here is the code for <code>CategorySummary</code>:</p>
  
  <pre><code>import 'dart:async';
  import 'package:angular2/core.dart';
  import 'package:angular2/router.dart';
  import 'package:PublicSite/models.dart';
  import 'package:PublicSite/pie_chart_component/pie_chart_component.dart';
  
  @Component(
          selector: 'category-summary',
          styleUrls: const ['category_summary_component.css'],
          templateUrl: 'category_summary_component.html',
          directives: const [PieChartComponent,ROUTER_DIRECTIVES])
  class CategorySummaryComponent {
    final Router _router;
  
    @Input()
    PromiseCategoryCount categoryCount;
  
    CategorySummaryComponent(this._router);
  
    Future gotoCategory() {
      return _router.navigate([
          'Category',
          {'id': categoryCount.Category}
        ]);
    }
  }
  </code></pre>
  
  <hr>
  
  <h3>Update</h3>
  
  <p>Tracing through the router code I found that when I call _router.navigate from my subcomponent the router doesn't have an outlet: _outlet is null. A clue, but what does it mean?</p>