Angular2 upgradeComponent如何做雙向綁定

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不起作用。 刪除它，並按預期連接。