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方法。

此外，此更改会触发$doChange() 两次。

我希望按钮单击只触发一次方法调用。

我做错了什么？任何指导都受到热烈欢迎。感谢

Answer 1

子组件或多或少都可以。有一点是你不能使用$ - 这是为角度内部变量和方法保留的。这是你自制的活动，所以应该没有美元。
组件不需要controllerAs语法 - 默认情况下为$ ctrl，没有必要更改它。
在html中，最好避免像ng-click="a = 2"这样的表达式，使用start中的方法。
当你直接调用方法时 - 你不需要$ 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>

AngularJS 1.6 + ES6 - $ doCheck被调用两次

1 个答案: