AngularDart [routerLink]未自动拼接父路径的路由问题

你已经精准定位到了问题根源：RouteDefinition的toUrl()方法不会拼接父路由路径，只有RoutePath的toUrl()才会处理父路径的合并。而你当前模板里直接绑定的是RouteDefinition的path属性（纯字符串），自然不会带上/portal前缀。

快速修复方案 #

方案1：直接在模板中使用RoutePath的toUrl()方法

首先确保组件中导入了你的子路由路径文件：

import 'login_register_route_paths.dart' as paths;

然后修改模板中的routerLink绑定，从直接用routes.login.path改成调用paths.login.toUrl()：

<nav>
  <a [routerLink]="paths.login.toUrl()">{{i18n.login}}</a>
  <a [routerLink]="paths.register.toUrl()">{{i18n.register}}</a>
</nav>
<router-outlet [routes]="routes.all"></router-outlet>

方案2：在路由类中封装完整URL（更易维护）

如果你希望模板代码更简洁，也可以在LoginRegisterRoutes类中添加获取完整URL的getter：

import 'package:angular_router/angular_router.dart';
import 'login_register_route_paths.dart' as paths;
// ... 其他导入 ...

class LoginRegisterRoutes {
  static final _login = new RouteDefinition(
    routePath: paths.login,
    component: login_component_template.LoginComponentNgFactory
  );
  static final _register = new RouteDefinition(
    routePath: paths.register,
    component: register_component_template.RegisterComponentNgFactory
  );
  static final _default = new RouteDefinition.redirect(
    path: '',
    redirectTo: paths.login.toUrl()
  );

  RouteDefinition get login => _login;
  RouteDefinition get register => _register;
  final List<RouteDefinition> all = [_login, _register, _default];

  // 添加这两个getter，返回带父路径的完整URL
  String get loginUrl => paths.login.toUrl();
  String get registerUrl => paths.register.toUrl();
}

然后模板里可以更清晰地调用：

<nav>
  <a [routerLink]="routes.loginUrl">{{i18n.login}}</a>
  <a [routerLink]="routes.registerUrl">{{i18n.register}}</a>
</nav>

为什么手动输入URL有效？ #

手动输入完整URL时，AngularDart路由器会遍历整个路由树，匹配到包含父路径/portal的RoutePath定义，所以能正确导航。但routerLink绑定纯字符串路径时，不会自动关联到对应的RoutePath的父节点配置，必须传入完整的带父路径的URL，或者通过RoutePath生成正确的路径。

内容的提问来源于stack exchange，提问作者Tobias Marschall