routing - 如何从 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}
      ]);
  }
}

更新

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

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