Question

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

问题在于我无法从CategorySummary（子组件）导航到Category。如果我将[routerLink]放在模板中，当我将鼠标悬停在链接上时，会看到正确的网址。单击链接可以正确更新浏览器中的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}
      ]);
  }

Answer 2

问题结果是多个组件定义了SplitContainers。一旦删除了额外的东西，事情开始表现。

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

更新

2 个答案: