路由时将 AngularDart 组件放在子文件夹中

Question

根据this tutorial，在Angular中为Dart定义路由时需要导入相关组件的template.dart文件：

import 'crisis_list_component.template.dart' as clct;
import 'hero_list_component.template.dart' as hlct;

我已将我的组件放在此代码所在文件夹的子文件夹中。我在 lib/src/routes.dart:

中有导入代码

import 'components/foobar/foobar_component.template.dart' as fct;

和 lib/src/components/foobar/foorbar_component.dart 中的 Foobar 组件。

当我在 src（即与 routes.dart 相同的文件夹）中有 foobar_component.dart 代码时，没有问题。但是当我将它移动到它自己的子文件夹时，出现错误：

Unable to find modules for some sources [...] Please check the following imports: import 'components/foobar/foobar_component.template.dart'

如何让它在其子文件夹中找到组件？

Answer 1

你可以使用

import '../../components/foobar/foobar_component.template.dart' as fct;

但通常情况下，最好不要在导入中使用 ../ 而是使用包导入

import 'package:my_package/web/src/components/foobar/foobar_component.template.dart' as fct;

其中 my_package 是 pubspec.yaml 中 name: ... 中使用的字符串，而 lib/ 在导入文件的路径中被跳过。