Question

我在学习AngularDART组件时制作了以下简单的代码，但没有显示任何内容，任何人都可以帮助我知道我犯了什么错误：

我的html主文件：

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="bootstrap.css">
        <link rel="stylesheet" href="main.css">
        <title>AngularDART training</title>
        <script type="application/dart" src="main.dart"></script>
        <script src="packages/browser/dart.js"></script>
    </head>
    <body ng-app>
        <h1 id='text_id'>Welcome</h1>
        <the-component></the-component>
    </body>
    </html>

main.dart文件是：

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

      @Component(
          selector: 'the-component',
          templateUrl: 'angularComponent.html',
          cssUrl: 'angularComponent.css',
          publishAs: 'cmp')
      class myComponent {var name = 'Component';}

      main() {
        var module = new Module()
                         ..bind(myComponent);

        applicationFactory().addModule(module).run();
      }

angularComponent.html文件是： <p>This is the angular: {{cmp.name}}</p>

<the-component></the-component>无效，无法显示任何内容！

感谢

Answer 1

角度变换器从lib文件夹中选取组件。如果将组件的文件（.dart，.html，.css）放在其他文件夹（即web）中，则需要在pubspec.yaml的变换器部分指定它们。

例如，

transformers
   - angular:
     -html_files:
        - absolute/path/to/your/html

希望这适合你。

Answer 2

感谢所有试图提供帮助的人，解决方案是将pubspec.yaml写成：

dependencies:
angular: '>=0.12.0 <0.13.0'
transformers:
- angular: {html_files: "web/angularComponent.html"}

感谢。

Answer 3

错误是您的pubspec.yaml没有将angularComponent.html列为资产。

创建StaticClosureMap的Angular变换器没有解析模板，从未看到cmp.name表达式，也从未生成过getter。

我们应该给你一个更好的错误信息。如果您仍然完整地隔离了整个项目，请在the Github project上提交错误，我们可以更好地体验这种体验。

AngularDART组件

3 个答案: