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

时间:2019-04-04 14:46:58

标签: angular-material angular-dart

我是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类名称添加到指令中:并添加关联的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

我认为我在这里缺少一些基本知识。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:1)

  

[问题1]顺便说一句,我实际上升了多个层次,直到我   可以克隆dart-lang / angular_components。但是我无法做到这一点   作为一个项目进行构建,以便我可以“实时”使用它,这可能会有所帮助。   我在这里错过了明显的东西吗?

您可以在本地构建和尝试的回购中唯一完整的软件包称为angular_components_example。它是构建示例库的包。 https://github.com/dart-lang/angular_components/tree/master/examples/angular_components_example

  

[问题2]因此,我在template.dart文件中有一个行号,   找不到此文件。

在生成期间生成的文件,例如.template.dart(按角度)或.css(按sass_builder),将位于包{\ {1}}根目录下的隐藏目录中。

  

[问题3]在查看代码时,我注意到   material_drop_select_simple_component.scss有红色花体   在...下...

我认为红色的波浪形实际上是红色的鲱鱼,您不必担心这些进口。它们是基于我们创建的一个小变通方法,使您可以在了解dart软件包系统的情况下导入sass文件,并且没有与IDE集成以支持导入。

我认为真正的问题是您的.dart_tool/build/generated/<your package name>文件中sass文件的名称。将行更改为:

material_dropdown_select_simple_component.dart

默认情况下,sass_builder软件包将软件包中的styleUrls: [material_dropdown_select_simple_component.css] 个文件编译为.scss个文件。 (我们只是在angular_components包中使用了不同的约定,所以当您复制文件时,文件中可能包含.css

答案 1 :(得分:0)

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

count()