angular-dart - 如何从当前路线获取路线ID？

Question

我在处理看似微不足道的事情时遇到了麻烦。

我创建了一条可以查看的路线，/cans/1当我到达那里时，我可以查看内容。

对于我的生活，我无法弄清楚如何将参数 1 从 URL 获取到视图中。

import 'package:angular/angular.dart';

@Component(
  selector: 'canId-summary',
  template: '''
    <div>
      <h1>canId Summary</h1>
      {{canId}}
    </div>
  ''',
  directives: [coreDirectives],
)
class CanComponent  {
  void canId() {
    // how do I get the $id out of the url for here?
  }
}

该路线适用于此内容

import 'package:angular_router/angular_router.dart';

const idParam = 'id';

class RoutePaths {
  static final dashboard = RoutePath(path: 'dashboard');
  static final cans = RoutePath(path: 'cans');
  static final can = RoutePath(path: '${cans.path}/:$idParam');
}

int getId(Map<String, String> parameters) {
  final id = parameters[idParam];
  return id == null ? null : int.tryParse(id);
}

import 'package:angular_router/angular_router.dart';

import 'route_paths.dart';

import 'dashboard_component.template.dart' as dashboard_template;
import 'cans_component.template.dart' as cans_template;
import 'can_component.template.dart' as can_template;

export 'route_paths.dart';

class Routes {
  static final dashboard = RouteDefinition(
    routePath: RoutePaths.dashboard,
    component: dashboard_template.DashboardComponentNgFactory,
  );

  static final cans = RouteDefinition(
    routePath: RoutePaths.assessments,
    component: cans_template.CansComponentNgFactory,
  );

  static final can = RouteDefinition(
    routePath: RoutePaths.can,
    component: can_template.CanComponentNgFactory,
  );

  static final all = <RouteDefinition>[
    dashboard,
    cans,
    can,
    RouteDefinition.redirect(
      path: '',
      redirectTo: RoutePaths.dashboard.toUrl(),
    ),
  ];
}

标签： angular-dartangular-dart-routing

Answer 1

我最终错过了以下解决方案之上的导入：

import 'package:angular_router/angular_router.dart';

和解决方案：

class CanComponent implements OnActivate

和

  @override
  void onActivate(RouterState previous, RouterState current) async {
    final id = current.parameters['id'];
  }