具有输出参数的 Angular 2 降级组件到 Angular 1答案

【问题标题】：Angular 2 Downgrade Component with Output Parameter to Angular 1具有输出参数的 Angular 2 降级组件到 Angular 1
【发布时间】：2019-07-29 05:54:29
【问题描述】：

我成功地将 Angular 7 组件降级到 Angular 1，但我遇到了一个小问题，我尝试了很多方法来解决。

我的降级组件输出参数如下：

@Output()isValid = new EventEmitter<boolean>();

触发如下：

this.isValid.emit(false);

在我的 Angular 1 组件中，我在降级后使用它，如下所示：

在模板中：

<downgrade-employee-selector (is-valid)="{{vm.validateEmployeeSelector($event)}}"> </downgrade-employee-selector>

在 ts 中：

self.validateEmployeeSelector = ($event) => {console.log($event);}

它工作正常，但在 Angular 1 函数中 $event 值始终未定义，我无法理解它是如何工作的。

【问题讨论】：

标签： angular angular7 downgrade

【解决方案1】：

我找到了解决我的问题的方法如下：

定义我的组件输入和输出：

directive('downgradeEmployeeSelector', downgradeComponent({
        component: EmployeeSelectorComponent,    
        inputs: ['selectedEmployeesIds', 'multiSelect', 'required'],
        outputs: ['isValid', 'selectedEmployeesIdsChange']
      })

在 Angular 1 html 页面中调用输出和输入：

<downgrade-employee-selector name="empSelector" [selected-employees-ids]="vm.selectedEmployeeIds" [required]="true" (is-valid)="vm.validateEmployeeSelector($event)"></downgrade-employee-selector>

【讨论】：

【解决方案2】：

实际上，原始实现的问题在于 AngularJS html 的语法。
我相信在 downgradeComponent 方法中添加输入和输出的规范（根据您自己的解决方案）不会改变事情。
但是，如果您在 AngularJS 标准中正确指定输出的名称（连字符而不是驼峰大小写），并且您绑定控制器的方法而不进行插值，它就像一个魅力。

解决方案：

在 Angular 组件中：
@Output() isValid = new EventEmitter<boolean>();

在 AngularJS 模板中：
<downgrade-employee-selector ... (is-valid)="vm.validateEmployeeSelector($event)"></downgrade-employee-selector>

降级时：
directive('downgradeEmployeeSelector', downgradeComponent({ component: EmployeeSelectorComponent })

【讨论】：