Question

我有一个大型应用程序，我刚刚开始升级到Angular 2.我们使用了许多第三方和自行开发的自定义指令，我们将在Angular 2中替换它们，但没有时间立即执行。其中许多都是像angular-ui这样的表单元素小部件。

在我们的Angular 2组件中，我想通过包装它们并升级包装器组件来弥补其中一些输入元素的间隙。但是，我无法得到一个包含普通<input>的简单示例。

绑定并不像我期望的那样双向。我不知道如何配置Output参数。

这是Angular 1组件的样子。

angular.module('app').component('ng1Wrapper', {
  template: '<input type="text" ng-model="$ctrl.model" />',
  bindings: { model: '=' }
});

升级它以在Angular 2组件中使用的适当方法是什么？

我希望能够在Angular 2组件中使用它，如：

<ng1-wrapper [(model)]="model.someProperty"></ng1-wrapper>

这是我到目前为止所尝试的，但输出绑定并没有改变Angular 2中模型的属性。我需要从这个包装指令捕获用户的输入，但也传递默认值。

import {
Directive, DoCheck, ElementRef, EventEmitter, Injector, Input, Output } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
@Directive({
  selector: 'ng1-wrapper'
})
export class Ng1WrapperDirective extends UpgradeComponent implements DoCheck {
  @Input() model: any;
  @Output() modelChange: EventEmitter<any> = new EventEmitter<any>();

  constructor(elementRef: ElementRef, injector: Injector) {
      super('ng1Wrapper', elementRef, injector);
  }

  ngDoCheck() {
      super.ngDoCheck();
      this.modelChange.next(this.model);
  }
}

Answer 1

有点晚了，但是我最近也遇到了这个问题。您所拥有的解决方案已经接近，但是我发现使用ngDoCheck无效。删除它，然后按预期进行连接。

Angular2 upgradeComponent如何做双向绑定

1 个答案: