如何从 AngularDart Gallery 获取 MaterialDropdownSelectSimpleDemoComponent 以在简单的 AngularDart 项目中工作

Question

我是 AngularDart 的新手，正在尝试将下拉选择器添加到我的项目中。我正在查看 AngularDart Gallery 中的示例，特别是：https://dart-lang.github.io/angular_components/#/material_dropdown_select

我回到“基础”并使用 IntelliJ IDEA > 新建项目 > Dart > AngularDart Web App 创建了一个新项目。 “我的第一个 AngularDart 应用程序”（一个 todo_list 应用程序）构建并且运行正常。

那么为了添加下拉选择器，在尝试了各种方法之后，我将 AngularDart Gallery 中的演示代码添加到这个项目中：

在上面的 URL 中，单击 MaterialDropdownSelectSimpleDemoComponent 旁边的“源代码”
在存储库中上一级并将 material_dropdown_select_simple_demo（.dart、.html 和 .scss）的内容复制到我的项目中
[问题 1] 顺便说一句，我实际上升级了多个级别，直到我可以克隆 dart-lang/angular_components。但是我无法将其构建为一个项目，以便我可以“实时”使用它，这可能会有所帮助。我在这里遗漏了什么明显的东西吗？？
所以我的项目中有一个 material_dropdown_select_simple_component.dart、.html、.scss 并更新了 @Component 选择器：templateUrl: 和 stryleUrls: 以匹配我的组件名称
然后在项目的主要组件中（app_component.html）我添加：

<material-dropdown-select-simple-component></material-dropdown-select-simple-component>

并将 MaterialDropdownSelectSimpleDemoComponent class 名称添加到指令中：并添加关联的导入语句
添加到pubspec.yaml中的依赖（由于使用了scss）

sass_builder: ^2.0.0

然后我尝试运行它并得到：

[SEVERE] build_web_compilers|entrypoint on web/main.dart:
Unable to find modules for some sources, this is usually the result of either a
bad import, a missing dependency in a package (or possibly a dev_dependency
needs to move to a real dependency), or a build failure (if importing a
generated file).

Please check the following imports:

`import 'package:DropDownSelectv4/src/todo_list/material_dropdown_select_simple_component.scss.css.shim.dart' as import0;` from DropDownSelectv4|lib/src/todo_list/material_dropdown_select_simple_component.template.dart at 10:1

[问题2] 所以我在一个template.dart文件中有一个行号，我找不到这个文件。

[问题3] 在查看代码时，我注意到 material_drop_select_simple_component.scss 下有红色波浪线：

@import 'package:angular_components/css/material/material';
@import 'package:angular_components/css/material/shadow';

也许我的 pubspec.yaml 文件中缺少依赖项，但我如何确定是什么？我目前有：

dependencies:
  angular: ^5.2.0
  angular_components: ^0.11.0
  sass_builder: ^2.0.0

dev_dependencies:
  angular_test: ^2.2.0
  build_runner: ^1.1.2
  build_test: ^0.10.3
  build_web_compilers: ^1.0.0
  pedantic: ^1.0.0
  test: ^1.5.1

我想我在这里遗漏了一些基本的东西。任何帮助将不胜感激。

Answer 1

[Problem 1] As an aside, I actually went up multiple levels until I could Clone dart-lang/angular_components. But I can’t get this to build as a project so that I can play with it “live” which might help. Am I missing something obvious here??

存储库中唯一可以在本地构建和试验的完全成熟的包称为 angular_components_example。它是构建示例库的包。 https://github.com/dart-lang/angular_components/tree/master/examples/angular_components_example

[Problem 2] So I have a line number in a template.dart file, and I can’t find this file.

在构建期间生成的文件，如 .template.dart（由 angular）或 .css（由 sass_builder）将位于隐藏目录中您的包的根名为 .dart_tool/build/generated/<your package name>

[Problem 3] In reviewing the code, I notice that in the material_drop_select_simple_component.scss there are red squiggles under...

我认为红色波浪线实际上是转移注意力的东西，您不必担心这些进口商品。它们来自我们创建的一个小解决方法，允许您导入 sass 具有 dart 包系统知识的文件，并且没有与 IDE 的任何集成来支持导入。

我认为真正的问题是 material_dropdown_select_simple_component.dart 文件中 sass 文件的名称。将行更改为：

styleUrls: [material_dropdown_select_simple_component.css]

默认情况下，sass_builder 包将包中的 .scss 个文件编译为 .css 个文件。（我们只是在 angular_components 包中使用了不同的约定，因此当您复制文件时，它可能包含 .scss.css。

Answer 2

希望以下两个链接对您有所帮助。


https://dart-lang.github.io/angular_components/#/material_dropdown_select

如何从 AngularDart Gallery 获取 MaterialDropdownSelectSimpleDemoComponent 以在简单的 AngularDart 项目中工作

How to get MaterialDropdownSelectSimpleDemoComponent from AngularDart Gallery to work in a simple AngularDart Project

angular-dart

angular-material