Как вызвать обновление NgComponent при изменении дочернего свойства

Я полный новичок в AngularDart (и Dart); Я следовал инструкциям, но я не могу найти ответ на этот вопрос.

У меня есть два компонента Ng, которые работают отлично:

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

У моего контроллера "ctrl" есть свойство с именем "car", а у "car" есть свойство с именем "color". Когда изменяется "car.color", обновляется colorButton NgComponent, а carImage NgComponent - нет.

Как я могу вызвать обновление carImage при изменении "car.color"?

Спасибо!!

Источник

2 ответа

Решение

Вы должны установить часы, чтобы car.color внутри вашего CarImage. Как это выглядит, зависит от того, какую структуру данных вы используете для автомобиля.

// constructor
CarImage(Scope scope) {
   scope.$watch(() => car.color, (color) => doSomething(color));
}
Источник

Вот рабочий пример без scope и watch функции. Я считаю, что это ангулярное решение.

Что-то еще об этой проблеме: /questions/32676965/metod-kontrollera-dostupa-iz-komponenta-i-ili-direktivyi/32676982#32676982

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>
Источник
Другие вопросы по тегам