dart - 如何从绝对 URL 制作 AngularDart 请求模板？

Question

当 AngularDart 请求一个 HTML 模板时，它会请求一个相对于浏览器当前 URL 的 URL。例如。如果用户当前在 / ，那么 AngularDart 可能会请求一个模板 URL，如 /packages/myapp/components/mycomponent.html .但是如果浏览器位置是 /foo或 /foo/bar ，将向 /foo/myapp/components/mycomponent.html 请求相同的模板或 /foo/bar/myapp/components/mycomponent.html ， 分别。

这显然是不受欢迎的行为。网址 /foo和 /foo/bar仅存在于 AngularDart 路由器中(我使用的是 pushState 路由)。服务器对他们一无所知!即使服务器确实有同名的 URL，它也不会有 packages在所有这些目录下都有符号链接(symbolic link)或别名。

我在声明组件时尝试了绝对 URL……

/// The top navigation bar.
@Component(
    selector: 'nav',
    templateUrl: '/static/dart/web/packages/myapp/component/nav.html',
    useShadowDom: false
)

…但是pub build提示。

[Warning from _Serial on myapp|web/main.dart with input myapp|lib/component/nav.dart]:
line 6, column 1 of package:myapp/component/nav.dart: Cannot cache non-package absolute URIs. /static/dart/web/packages/myapp/component/nav.html
@Component(
^^^^^^^^^^^

声明 templateUrl 的祝福方式是使其成为以 packages/ 开头的相对 URL .

/// The top navigation bar.
@Component(
    selector: 'nav',
    templateUrl: 'packages/myapp/component/nav.html',
    useShadowDom: false
)

因此，即使浏览器的位置与服务器上的存储位置完全分离，我似乎也被迫对模板使用相对 URL。

那么我应该如何告诉 AngularDart 从绝对 URL 请求这些模板，而不是构建相对于浏览器当前位置的 URL？

Answer 1

我链接模板文件和css文件的常用方法是使用基于包目录的路径。

这是我的组件声明之一

@Component(
    selector: 'game-card',
    cssUrl: 'packages/myapp_name/components/game/game_card.css',
    templateUrl: 'packages/myapp_name/components/game/game_card.html')

和 game_card.html文件实际位于 /lib/components/game/game_card.htmlmyapp_name是您在 pubspec.yaml 中为您的应用指定的名称