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

Question

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

我已经回到“基础”并使用IntelliJ IDEA> New Project> 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类名添加到指令：并添加关联的import语句
• 添加到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

[问题1]另外，我实际上上升了多个级别，直到克隆dart-lang / angular_components。但我无法将其作为一个项目来构建，以便我可以“实时”使用它，这可能有所帮助。我错过了一些明显的东西吗？

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

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

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

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

我认为红色的花纹实际上是红色的鲱鱼，你不应该担心那些进口。它们来自我们创建的一个小解决方法，允许您导入具有dart包系统知识的sass文件，并且没有与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://stackoverflow.com/questions/44230452/how-to-use-material-dropdown-select-in-angular-dart
https://dart-lang.github.io/angular_components/#/material_dropdown_select