Question

我成功地将角度7的组件降级为角度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);}

它的工作正常，但是始终没有定义角度1函数值中的$ event，我无法知道它如何工作。

Answer 1

我为我的难题解决了以下问题：

定义我的组件输入和输出：directive('downgradeEmployeeSelector', downgradeComponent({ component: EmployeeSelectorComponent, inputs: ['selectedEmployeesIds', 'multiSelect', 'required'], outputs: ['isValid', 'selectedEmployeesIdsChange'] })
在角度为1的html页面中的输出和输入：<downgrade-employee-selector name="empSelector" [selected-employees-ids]="vm.selectedEmployeeIds" [required]="true" (is-valid)="vm.validateEmployeeSelector($event)"></downgrade-employee-selector>

Answer 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 })

Angular 2将输出参数降级为Angular 1的组件

2 个答案:

解决方案：