如何从Angular Dart 2中的子组件导航？

Question

我有三个组成部分：Summary，CategorySummary和Category。 CategorySummary是Summary的子组件。我已经为Summary和Category定义了路线，并且可以通过[routerLink]在两者之间导航。

问题是我无法从CategorySummary（子组件）导航到Category。如果我将[routerLink]放在模板中，当我将鼠标悬停在链接上时，会看到正确的URL。单击链接可以正确更新浏览器中的URL，但页面不会更改。

如果我尝试通过router.navigate导航，症状是相同的。

如何从子组件导航？

这是CategorySummary的代码：

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

---

Update

跟踪路由器代码我发现当我从子组件调用_router.navigate时，路由器没有插座：_outlet为null。一个线索，但它是什么意思？

Answer 1

您可以使用绝对路径

  Future gotoCategory() {
    return _router.navigate([
        '/Summary', 'Category',
        {'id': categoryCount.Category}
      ]);
  }

要么

  Future gotoCategory() {
    return _router.navigate([
        '/Summary/Category',
        {'id': categoryCount.Category}
      ]);
  }

或相对路径

  Future gotoCategory() {
    return _router.navigate([
        '../Category',
        {'id': categoryCount.Category}
      ]);
  }

Answer 2

事实证明，这个问题不仅仅是一个定义了ROUTER_PROVIDERS的组件。一旦删除了额外的东西，事情开始表现。