时间戳

首页 > 解决方案 > 带有输出参数的 Angular 2 降级组件到 Angular 1

angular - 带有输出参数的 Angular 2 降级组件到 Angular 1

问题描述

我成功地将 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>

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

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

标签： angularangular7downgrade

解决方案

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

  • 定义我的组件输入和输出：
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>

推荐阅读