AngularDart 如何创建组件答案

【问题标题】：AngularDart How to Create ComponentAngularDart 如何创建组件
【发布时间】：2014-02-02 02:01:37
【问题描述】：

我刚刚开始学习本教程： https://github.com/angular/angular.dart.tutorial/wiki/Creating-a-Custom-Component

我遇到了一个问题，正在寻求帮助。评级组件没有显示给我，没有调用任何方法（至少没有在任何断点处）。在这里你可以看到代码： https://www.dropbox.com/s/oizzl9k6nclgoqd/SecondAngularDart.zip

请帮助我一些指导，我该如何调试这种情况？或者是什么问题？

@NgComponent(
  selector:'rating',
  templateUrl:'rating_component.html',
  cssUrl:'rating_component.css',
  publishAs:'cmp'
)
class RatingComponent {
  static const String _starOnChar = "\u2605";
  static const String _starOffChar = "\u2606";
  static const String _starOnClass = "star-on";
  static const String _starOffClass = "star-off";

  List<int> stars = [];

  @NgTwoWay('rating')
  int rating;

  @NgAttr('max-rating')
  int maxRating(String max) {
    stars = [];
    var count = max == null ? 5 : int.parse(max);
    for(var i=1; i <= count; i++) {
      stars.add(i);
    }
  }

  String starClass(int star) {
    return star > rating ? _starOffClass : _starOnClass;
  }

  String starChar(int star) {
    return star > rating ? _starOffChar : _starOnChar;
  }

  void handleClick(int star) {
    if (star == 1 && rating == 1) {
      rating = 0;
    } else {
      rating = star;
    }
  }
}

【问题讨论】：

标签： dart angular-dart

【解决方案1】：

你已经用@NgAttr('max-rating') 注释了一个函数。这些数据绑定注释仅适用于字段或设置器：

@NgAttr('max-rating')
set maxRating(String max) {
  stars = [];
  var count = max == null ? 5 : int.parse(max);
  for(var i=1; i <= count; i++) {
    stars.add(i);
  }
}

此外，在starClass 和starChar 中，您访问rating，它可能为空：

String starClass(int star) {
  if (rating != null) {
    return star > rating ? _starOffClass : _starOnClass;
  }
}

【讨论】：

感谢您的帮助，这是前进了一步，但仍然无法正常工作。我有一种感觉 rating_component.html 没有正确加载。即使我将 ng-repeat="star in cmp.stars" 行更改为 ng-repeat="star in cmpy.stars2" 之类的东西，也完全没有错误……就像根本没有处理一样。此外，starClass 和 starClass 方法根本不被调用。
根据 Chrome DevTools / Source，来自 @NgComponent( selector: 'rating', templateUrl: 'rating_component.html', cssUrl: 'rating_component.css', publishAs: 'cmp' ) 的组件是没有加载。你怎么看，怎么了？

【解决方案2】：

好吧，这是一个初学者的错误，但我是这样使用组件的：

<rating max-rating="5" rating="{{ctrl.selectedRecipe.ratings}}"></rating>

但是应该这样使用：

<rating max-rating="5" rating="ctrl.selectedRecipe.ratings"></rating>

【讨论】：