Angular2Dart 和 NG 指令

Question

使用以下代码调查 Dart 的 angular2

show_properties.dart

library displaying_data.show_properties;

import 'package:angular2/angular2.dart';
import 'dart:async';

@Component( selector: 'display' )
@View( template: '''
<p>My name: {{ myName }}</p>
<p>Current time: {{ time }}</p>
<p>Friends:</p>
<ul>
   <li *ng-for="#name of friendNames">
      {{ name }}
   </li>
</ul>
''', directives: const [NgFor] )
class DisplayComponent {
  String myName = 'Alice';
  String time;
  Timer _timer;

  List<String> friendNames = const [
    'Aarav',
    'Martín',
    'Shannon',
    'Ariana',
    'Kai'
  ];

  DisplayComponent( ) {
    _updateTime( null );
    _timer = new Timer.periodic( new Duration( seconds: 1 ), _updateTime );
  }

  _updateTime( Timer _ ) {
    time = new DateTime.now( ).toString( );
  }

}

我正在按照 https://angular.io/docs/dart/latest/guide/displaying-data.html

中的示例进行操作

我正在使用当前的 WebStorm 11 EAP。

尝试运行此应用程序失败（没有任何错误）。好像

directives: const [NgFor]

@View 的

属性是问题的原因。

这是为 Dart 使用 NG 指令和 angular2 的正确方法吗？

因以下错误而失败

    J:\dart\dart-sdk\bin\pub.bat serve web --port=63462
Loading source assets...
Loading angular2 transformers...
Serving displaying_data web on http://localhost:63462
Build completed successfully
[web] GET Served 415 assets.
Build error:
Transform DirectiveProcessor on displaying_data|lib/show_properties.dart threw error: Bad UTF-8 encoding 0x6e
dart:convert/utf.dart 479                  _Utf8Decoder.convert
dart:convert/utf.dart 346                  Utf8Decoder.convert
dart:convert/utf.dart 66                   Utf8Codec.decode
dart:async/zone.dart 910                   _rootRunUnary
dart:async/zone.dart 810                   _CustomZone.runUnary
dart:async/future_impl.dart 502            _Future._propagateToListeners.handleValueCallback
dart:async/future_impl.dart 585            _Future._propagateToListeners
dart:async/future_impl.dart 376            _Future._completeWithValue
dart:async/future_impl.dart 430            _Future._asyncComplete.<fn>
dart:async/zone.dart 903                   _rootRun
dart:async/zone.dart 802                   _CustomZone.run
dart:async/zone.dart 735                   _CustomZone.bindCallback.<fn>
dart:async/schedule_microtask.dart 43      _microtaskLoop
dart:async/schedule_microtask.dart 52      _microtaskLoopEntry
dart:isolate-patch/isolate_patch.dart 96   _runPendingImmediateCallback
dart:isolate-patch/isolate_patch.dart 149  _RawReceivePortImpl._handleMessage

dart:isolate  _RawReceivePortImpl._handleMessage
Build error:
Transform DirectiveProcessor on displaying_data|lib/show_properties.dart threw error: Bad UTF-8 encoding 0x6e
dart:convert/utf.dart 479                  _Utf8Decoder.convert
dart:convert/utf.dart 346                  Utf8Decoder.convert
dart:convert/utf.dart 66                   Utf8Codec.decode
dart:async/zone.dart 910                   _rootRunUnary
dart:async/zone.dart 810                   _CustomZone.runUnary
dart:async/future_impl.dart 502            _Future._propagateToListeners.handleValueCallback
dart:async/future_impl.dart 585            _Future._propagateToListeners
dart:async/future_impl.dart 376            _Future._completeWithValue
dart:async/future_impl.dart 430            _Future._asyncComplete.<fn>
dart:async/zone.dart 903                   _rootRun
dart:async/zone.dart 802                   _CustomZone.run
dart:async/zone.dart 735                   _CustomZone.bindCallback.<fn>
dart:async/schedule_microtask.dart 43      _microtaskLoop
dart:async/schedule_microtask.dart 52      _microtaskLoopEntry
dart:isolate-patch/isolate_patch.dart 96   _runPendingImmediateCallback
dart:isolate-patch/isolate_patch.dart 149  _RawReceivePortImpl._handleMessage

dart:isolate  _RawReceivePortImpl._handleMessage
Build error:
Transform DirectiveProcessor on displaying_data|lib/show_properties.dart threw error: Bad UTF-8 encoding 0x6e
dart:convert/utf.dart 479                  _Utf8Decoder.convert
dart:convert/utf.dart 346                  Utf8Decoder.convert
dart:convert/utf.dart 66                   Utf8Codec.decode
dart:async/zone.dart 910                   _rootRunUnary
dart:async/zone.dart 810                   _CustomZone.runUnary
dart:async/future_impl.dart 502            _Future._propagateToListeners.handleValueCallback
dart:async/future_impl.dart 585            _Future._propagateToListeners
dart:async/future_impl.dart 376            _Future._completeWithValue
dart:async/future_impl.dart 430            _Future._asyncComplete.<fn>
dart:async/zone.dart 903                   _rootRun
dart:async/zone.dart 802                   _CustomZone.run
dart:async/zone.dart 735                   _CustomZone.bindCallback.<fn>
dart:async/schedule_microtask.dart 43      _microtaskLoop
dart:async/schedule_microtask.dart 52      _microtaskLoopEntry
dart:isolate-patch/isolate_patch.dart 96   _runPendingImmediateCallback
dart:isolate-patch/isolate_patch.dart 149  _RawReceivePortImpl._handleMessage

dart:isolate  _RawReceivePortImpl._handleMessage
[web] GET Served 244 assets.
Build error:
Transform DirectiveProcessor on displaying_data|lib/show_properties.dart threw error: Bad UTF-8 encoding 0x6e
dart:convert/utf.dart 479                  _Utf8Decoder.convert
'''

谢谢

Answer 1

您的 lib/show_properties.dart 文件似乎已损坏。重命名原始文件并将内容复制到新的 lib/show_properties.dart 文件应该可以解决问题。如果这不起作用，请再次从教程中复制内容，然后重试。

Answer 2

可能有几个问题：viewInjector 已弃用

https://github.com/angular/angular/issues/3536

Angular2Dart 和 NG 指令

Angular2Dart and NG Directives

dart

angular-dart

show_properties.dart

因以下错误而失败