AngularDart中的somecomponent.template.dart导入指向什么？

Question

我只是在阅读AngularDart的 路由教程 并发现了这个代码片段。

import 'package:angular/angular.dart';
import 'package:angular_router/angular_router.dart';

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

@Injectable()
class Routes {
  static final _crises = new RouteDefinition(
    routePath: paths.crises,
    component: clct.CrisisListComponentNgFactory,
  );

  static final _heroes = new RouteDefinition(
    routePath: paths.heroes,
    component: hlct.HeroListComponentNgFactory,
  ); ..... see routing tutorial link above.
}

什么是

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

实际上是导入？

Answer 1

Angular使用代码生成，从Angular模板语法生成Dart代码。

这些组件导入生成的代码。这些代码包含路由器创建组件实例所需的工厂方法。

如果你有一个

import 'crisis_list_component.dart';

然后代码生成将产生一个额外的

import 'crisis_list_component.template.dart' as clct;

在这种情况下，它是以一个别名导入的 clct

Answer 2

Angular编译器在你构建应用时，会在幕后生成组件工厂。要访问工厂，你需要导入生成的组件模板文件。在你构建应用之前，生成的文件是不存在的。

来源：Jaimeloeuf的Medium出版物。Jaimeloeuf的Medium出版物。

请注意，您可以在您的项目文件夹中的 project.dart_tools/build/generated 路径。