子属性改变时如何触发 NgComponent 的更新答案

【问题标题】：How to trigger an update of NgComponent when child property changes子属性改变时如何触发 NgComponent 的更新
【发布时间】：2014-02-14 08:03:37
【问题描述】：

我是 AngularDart（和 Dart）的完全初学者；我按照教程进行操作，但似乎找不到答案。

我有两个完美运行的 NgComponents：

 <colorImage car-color="ctrl.car.color"></colorImage>
 <carImage car="ctrl.car"></carImage>

我的控制器“ctrl”有一个名为“car”的属性，而“car”有一个名为“color”的属性。当“car.color”发生变化时，colorButton NgComponent 会更新，但 carImage NgComponent 不会。

如何在“car.color”发生变化时触发carImage的更新？

谢谢！！

【问题讨论】：

标签： dart angular-dart

【解决方案1】：

您必须在 CarImage 中将手表设置为 car.color。这看起来如何取决于您用于汽车的数据结构。

// constructor
CarImage(Scope scope) {
   scope.$watch(() => car.color, (color) => doSomething(color));
}

【讨论】：

谢谢，这就是我要找的。它似乎比直接绑定慢一点，但仍然可以正常工作！

【解决方案2】：

这是没有scope 和watch 功能的工作示例。我相信这是一个 angulardartish 解决方案。

关于这个问题的更多信息：https://stackoverflow.com/a/21958268/2777805

ang_testi.dart

import 'package:angular/angular.dart';

@NgComponent(
 selector: 'colorImage',
 template: r'<p>colorImage: <input type="text" ng-model="cmp.carColor"></p>',
 publishAs: 'cmp'
)
class colorImage {
  @NgTwoWay('car-color')
  String carColor;
}

@NgComponent(
    selector: 'carImage',
    template: r'<p>carImage: <input type="text" ng-model="cmp.car.color"></p>',
    publishAs: 'cmp'
)
class carImage {
  @NgTwoWay('car')
  Map car;
}

@NgController(
    selector: '[main-test]',
    publishAs: 'ctrl')
class MainTestController {
  Map car = {"color":"green", "image":"someImage"};
}

class MyAppModule extends Module {
  MyAppModule() {
    type(MainTestController);
    type(colorImage);
    type(carImage);
  }
}

void main() {
  ngBootstrap(module: new MyAppModule());
}

ang_testi.html

<!DOCTYPE html>

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>ng-model test</title>
    <link rel="stylesheet" href="ang_testi.css">
  </head>
  <body main-test>
    <colorImage car-color="ctrl.car.color"></colorImage> 
    <carImage car="ctrl.car"></carImage> 

    <p>controller: <input type="text" ng-model="ctrl.car.color"></p>
    <p>color is {{ctrl.car.color}}</p>

    <script src="packages/shadow_dom/shadow_dom.min.js"></script>
    <script type="application/dart" src="ang_testi.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

【讨论】：

在控制器中不需要类型“Map”、“String color;”足够的。在调用 carImage 组件（例如）时，您可以使用整个控制器作为参考（这很有趣）。组件内部的变量需要定义为“var car;”为了获得正确的类型。