繁体   English   中英

自定义Angular Dart组件包

[英]Custom Angular Dart Component Package

我创建了一个要在我的主项目中使用的角度飞镖组件。 我正在使用路径包来引用它。 组件的构造函数(在dart文件中)被调用,但是出现错误,找不到.css和.html文件。 它在寻找它们的路径似乎存在,因此我不确定为什么找不到它们。

我在整个代码中都使用了其他自定义组件,但是没有与之关联的html或css文件,它们很好,它似乎仅限于html和css文件。

这是我的代码片段

位于test_component / lib / test_component /中的test.dart

library TestCom;

import 'package:angular/angular.dart';

@Component(
    selector: 'tester',
    templateUrl: 'test.html',
    cssUrl: 'test.css')
class TestComponent {
 String t = "this is the test component";

 TestComponent() {
    print("Test Component STARTED");
  }
}

位于test_component / lib / test_component /中的test.html

<h3>{{t}}</h3>

pubspec.yaml位于test_component中

name: TestModule
dependencies:
  angular: "^1.1.2+2"
  browser: any
transformers:
- angular:
    html_files:
      - lib/test_component/test.html

main.dart位于main / src / main / dart / web中

import 'package:TestModule/test_component/test.dart';

class MyAppModule extends Module {
  MyAppModule() {
    bind(TestComponent);
  }
}

位于main / src / main / dart / web /中的index.html

<tester></tester>

pubspec.yaml位于main / src / main / dart中

name: main_package
dependencies:
  angular: "^1.1.2+2"
  browser: any
  shadow_dom: any
  json_object: any   
  bootjack: any
  crypto: any
  xml: "^2.3.2"
  TestModule:
    path: ../../../../test_component
transformers:
- angular:

运行pub get之后,在我的主项目的packages文件夹中,存在TestModule / test_component /,其中包含test.css,test.dart和test.html。 我不确定为什么在运行它时找不到.html和.css文件。

这是我运行控制台时显示的内容

Observatory listening at http://127.0.0.1:54254/
Test Component STARTED
index.html:1 GET http://127.0.0.1:3030/packages/TestModule/test_component/test.css 404 (Not Found)
index.html:1 GET http://127.0.0.1:3030/packages/TestModule/test_component/test.html 404 (Not Found)
2 HTTP 404: <html><head><title>404 Not Found</title></head><body>File not found</body></html>

STACKTRACE:
null

尝试这个

 name: TestModule
    dependencies:
      angular: "^1.1.2+2"
      browser: any
    transformers:
    - angular:
        html_files:
          - packages/TestModule/test_component/test.html

但是对于css文件,我认为您只需要将它们与组件的Dart文件放在同一文件夹中即可。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM