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

【问题标题】：How do you navigate from a sub component in Angular Dart 2?如何从 Angular Dart 2 中的子组件导航？
【发布时间】：2017-12-29 09:42:31
【问题描述】：

我有三个组件：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 为空。一个线索，但这是什么意思？

【问题讨论】：

标签： routing dart angular-dart

【解决方案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}
      ]);
  }

【讨论】：

没有骰子。 “/Category”和“/Summary”是顶级路由。没有“/Summary/Category”的路径。一切正常，除非我尝试从“/Summary”上的子组件导航到“/Category”。 FWIW，第三个示例导致控制台中出现此消息：ORIGINAL EXCEPTION: Link "[../Category, {id: health}]" has too many "../" segments。

【解决方案2】：

问题出在不止一个定义了ROUTER_PROVIDERS 的组件上。一旦移除了额外的东西，事情就开始表现出来了。

【讨论】：