AngularJS 1.6 + ES6 - $ doCheckが2回呼び出されました

Question

AngularJSを使用して子コンポーネントから親コンポーネントにイベントを伝播しようとしています。

parent.component.js

import angular from 'angular'; 
import childComponent from './child/child.component' 

let parent = { 
     template: require('./parent.view.html'), 
     controller: 'parentController', 
     controllerAs: 'parentCtrl', 

    }; 

class parentController { 
    constructor() { 
      this.myvalue = 'default'; 
    } 

    $doCheck(event) {    
     console.log('new myvalue:' + this.myvalue); 
    } 
} 

const parentComponent = 'parent'; 

angular.module(parentComponent, [childComponent]) 
    .component('parent', parent) 
    .controller('parentController', parentController); 

export default parentComponent; 

parent.view.html

<child changevalue="parentCtrl.myvalue = $event.myvalue"></child> 
    <p>myvalue: {{parentCtrl.myvalue}}</p> 

child.component.js：

私が示すように、親コンポーネントを有します

ボタンのクリック時に

import angular from 'angular'; 

let child = { 

    template: require('./child.view.html'), 
    controller: 'childController', 
    controllerAs: 'childCtrl', 
    bindings:{   
     changevalue: '&' 
    } 

}; 

class childController { 
    constructor() { 
    }  

    triggerEvent() {   
     this.changevalue({$event: {myvalue: 'child1'}}); 
    } 

} 

const childComponent = 'childComponent'; 

angular.module(childComponent, []) 
    .component('child', child) 
    .controller('childController', childController); 

export default childComponent; 

child.view.html

<button ng-click="childCtrl.triggerEvent()">Select</button> 

子ビューで、私は正常に親図に示すように、親にmyvalueを変更することができますよ。

ただし、この変更は$onChange()メソッドをparent.component.jsにトリガーしません。

さらに、この変更により、 が2回にトリガされます。

ボタンをクリックしてメソッド呼び出しを1回だけトリガーする必要があります。

私は間違っていますか？どんな指導も真剣に歓迎されます。ありがとう

Answer 1

1. 子コンポーネントは多かれ少なかれokです。 1つは、$を使用してはならないということです。これは角内部変数とメソッドに予約されています。 これはあなたの手作りの出来事なので、ドルなしでなければなりません。
2. コンポーネントのcontrollerAs構文は必要ありません。デフォルトでは$ ctrlであり、変更するポイントはありません。
3. htmlでは、ng-click="a = 2"のような式を避けて、最初からメソッドを使用する方が良いです。
4. メソッドを直接呼び出すと、$ onCheck、$ onChangesなどは必要ありません。 $ onChangesと$ onCheckはバインディングの変更を監視することです。あなたが親の中で何かを変更し、子供のこれらの変更を見るのを見ているなら、それらを必要とします。

   let child = { 
   
       template: require('./child.view.html'), 
       controller: 'childController', 
       bindings:{   
        changevalue: '&' 
       } 
   
   }; 
   
   class childController { 
       constructor() { 
       }  
   
       triggerEvent() {   
        this.changevalue({event: {myvalue: 'child1'}}); 
       } 
   
   } 
   
   <button ng-click="$ctrl.triggerEvent()">Select</button> 
   
   
   let parent = { 
        template: require('./parent.view.html'), 
        controller: 'parentController', 
   
       }; 
   
       class parentController { 
        constructor() { 
          this.myvalue = 'default'; 
        } 
   
        setEvent(event) { 
         this.myvalue = event.myvalue;    
         console.log('new myvalue:' + this.myvalue); 
        } 
       } 
   
   
       <child changevalue="$ctrl.setEvent(event)></child> 
        <p>myvalue: {{parentCtrl.myvalue}}</p> 
   

   ：あなたが持っている最後に