Routing 如何从角省道2中的子组件导航？

我有三个部分：

摘要

，

分类摘要

和

类别

<代码>分类摘要是

摘要

的子组件。我已经为

Summary

和

Category

定义了路由，并且可以通过

[routerLink]

在这两个路由之间导航

问题是我无法从

类别摘要

（子组件）导航到

类别

。如果我将

[routerLink]

放在模板中，当我将鼠标悬停在链接上时，我会看到正确的URL。单击链接可正确更新浏览器中的URL，但页面不会更改

如果我尝试通过

路由器进行导航，症状相同。导航

如何从子组件导航

以下是分类摘要的代码：

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为null。一个线索，但它意味着什么？

您可以使用如下绝对路径

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

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

或

或相对路径，如

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

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

---

您可以使用绝对路径，如

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

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

或

或相对路径，如

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

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

---

问题是不止一个组件定义了

ROUTER\u提供者

。一旦删除了附加组件，事情就开始运行了。

问题原来不止一个组件定义了

路由器\u提供程序。一旦多余的东西被移除，事情就开始了。
没有骰子。“/Category”和“/Summary”是顶级路由。没有指向“/摘要/类别”的路径。除了我尝试从“/Summary”上的子组件导航到“/Category”时，所有这些都可以工作。FWIW，第三个示例在控制台中显示此消息：原始异常：链接“[../Category，{id:health}]”有太多“./”段。没有骰子。“/Category”和“/Summary”是顶级路由。没有指向“/摘要/类别”的路径。除了我尝试从“/Summary”上的子组件导航到“/Category”时，所有这些都可以工作。FWIW，第三个示例导致控制台中出现以下消息：原始异常：链接“[../Category，{id:health}]”的“../”段太多。