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

【问题标题】：Putting AngularDart components in subfolders when routing路由时将 AngularDart 组件放在子文件夹中
【发布时间】：2018-11-27 09:24:06
【问题描述】：

根据this tutorial，在Angular for 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 代码时，没有问题。但是当我将它移动到它自己的子文件夹时，我得到了错误：

无法找到某些来源的模块 [...] 请检查以下导入：import 'components/foobar/foobar_component.template.dart'

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

【问题讨论】：

【解决方案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/ 在导入文件的路径中被跳过。

【讨论】：

我尝试了import 'web:src/components/...，但出现错误“不支持的操作：无法解析 web:src/components/[...];仅支持“包”和“资产”方案'
您是否将项目命名为web？提出具体建议有点困难，因为您的问题仅提供了部分路径。如果您要添加导入和导入文件的完整路径（相对于包含 pubspec.yaml 的目录，我可能会提出更好的建议。
是的，这个项目叫做web。 pubspec.yaml 在根目录中。 routes.dart在lib/src，组件在lib/src/components/[name]。
对不起，我的错误（有点停电;-)）。我更新了我的答案。