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

Posted 2023-02-19

【中文标题】具有输出参数的 Angular 2 降级组件到 Angular 1

【英文标题】：Angular 2 Downgrade Component with Output Parameter to 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 值始终未定义，我无法理解它是如何工作的。

【参考方案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 )