AngularJS1.5+组件不支持Watcher,其工作是什么?

AngularJS1.5+组件不支持Watcher,其工作是什么?

我一直在将我的自定义指令升级到新的组件体系结构..我读过组件不支持观察者。这是对的吗?如果是,如何检测对象上的更改?对于一个基本示例,我有自定义组件。myBox它有一个在游戏上绑定的子组件游戏。如果游戏组件中存在更改游戏,如何在myBox中显示警告消息?据我所知,有rxJS方法,可以纯粹在角度上这样做吗?我的JSFiddle

JavaScript

var app = angular.module('myApp', []);app.controller('mainCtrl', function($scope) {

   $scope.name = "Tony Danza";});app.component("myBox",  {
      bindings: {},
      controller: function($element) {
        var myBox = this;
        myBox.game = 'World Of warcraft';
        //IF myBox.game changes, show alert message 'NAME CHANGE'
      },
      controllerAs: 'myBox',
      templateUrl: "/template",
      transclude: true})app.component("game",  {
      bindings: {game:'='},
      controller: function($element) {
        var game = this;


      },
      controllerAs: 'game',
      templateUrl: "/template2"})

HTML

<div ng-app="myApp" ng-controller="mainCtrl">
  <script type="text/ng-template" id="/template">
    <div style='width:40%;border:2px solid black;background-color:yellow'>
      Your Favourite game is: {{myBox.game}}
      <game game='myBox.game'></game>
    </div>
  </script>

 <script type="text/ng-template" id="/template2">
    <div>
    </br>
        Change Game
      <textarea ng-model='game.game'></textarea>
    </div>
  </script>

  Hi {{name}}  <my-box>

  </my-box></div><!--end app-->


catspeake
浏览 568回答 3
3回答

慕斯王

基本角度1.5.component方法JUS区分两种不同的功能。喜欢component表示执行特定行为的方法是添加selector,在哪里directive将特定行为添加到DOM中。指令只是包装方法。.directive指令定义对象(DDO)。只有你能看到的是,他们把link/compile使用时的功能.component方法,在该方法中,您可以获得角编译DOM。请使用$onChanges/$doCheck角度组件生命周期钩子,这些将在角1.5.3+版本后提供。$ONChanges(ChangesObj)-每当更新绑定时调用。ChangesObj是一个哈希,其键是绑定属性的名称。$doCheck()-在绑定更改时调用摘要周期的每一个回合。提供一个检测更改并对其采取行动的机会。通过使用相同的函数,内部组件将确保您的代码兼容移动到角2。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

AngularJS