angular - Dart Angular 路线参数不起作用

Question

我试图让AngularDart路由正常工作，这让我头疼。我正在尝试获取子路线的查询参数，并且在像the tutorial here says一样扩展OnActivate时，它在我的组件中不起作用。它可以识别页面，但不会在RouterState中提供参数。我不知道为什么我没有错误，也没有警告或其他任何信息。我现在可以使用Uri类绕过它来测试其他事情并保持动力，但是我希望它能够按预期运行。

结构如下:

Top
 - /routes.dart
 - /route_paths.dart
 - /resources_list_component.dart
 - /resources
   - ./resources_routes.dart
   - ./resources_route_paths.dart
   - ./my_resource_component.dart
   - ./my_resource_component.html

在 /route_paths.dart我有

static final resources = RoutePath(path: 'resources');

然后在 /routes.dart中使用:

static final resources = RouteDefinition(
  routePath: RoutePaths.resouces
  component: resource_list_template.ResourceListComponentNgFactory
);

然后，在资源路由路径文件中，将此路由用作父路由器:

static final resource = RoutePath(
  path: 'resource/:id',
  parent: _parent.RoutePaths.resources
);

在上面的代码片段中，您可以看到我期望RouterState具有AngularDart文档中建议的查询参数 id。这使我可以执行以下操作: http://localhost/#/resources/resource/1
然后在 resources/resources_routes.dart中使用此路由器路径:

    static final resource = RouteDefinition(
        routePath: ResourcesRoutePaths.resource,
        component: my_resource_template.MyResourceComponentNgFactory,
    );

    static final all = <RouterDefinition>[ resource ];

所有这些几乎都有效。当我转到url /resources/resource/1时，我确实从 my_resource_component.html看到了正确的HTML输出，因此我知道Angular Routing可以正常工作了。更重要的是试图使 /1成为名称为“id”的查询参数。

在它的文档中说，我需要使用OnActivate扩展组件，该组件特定于应用程序的生命周期。因此，我将以下方法添加到 Controller 中:

@Component(...)
class MyResourceComponent extends OnActivate {
    ...
    @override
    OnActivate (RouterState _, RouterState current) {
       Console().log(current.queryParameters.isEmpty);
    }
}

上面的代码输出 true。如在queryParameters中为空。我已按照指南进行操作，目前我不知道自己缺少什么。有人知道为什么会发生这种情况，还是我错过了一个醒目的步骤？

Answer 1

问题是您正在尝试访问queryParameters而不是parameters。
Console().log(current.queryParameters.isEmpty);
与
Console().log(current.parameters.isEmpty);
https://angulardart.dev/api/angular_router/angular_router/RouterState/parameters
parameters映射返回URL参数，而queryParameters映射返回查询参数。例如，给定URL:
/resources/resource/1?hey=dude
“1”是url参数，其中“hey”是查询参数。