Angular2 upgradeComponent如何做2路绑定答案

【问题标题】：Angular2 upgradeComponent how to do 2-way bindingAngular2 upgradeComponent如何做2路绑定
【发布时间】：2017-01-24 19:21:06
【问题描述】：

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

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

绑定并没有像我预期的那样双向进行。而且我不确定如何配置输出参数。

这是 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);
  }
}

【问题讨论】：

标签： angular angularjs-directive angular-ngmodel angular2-ngmodel angular2-upgrade

【解决方案1】：

有点晚了，但我最近也遇到了这个问题。您的解决方案很接近，但我发现使用 ngDoCheck 不起作用。移除它，它就会按预期连接起来。

【讨论】：