Angular2 upgradeComponent, как сделать 2-стороннюю привязку

У меня есть большое приложение, которое я только начинаю обновлять до 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);
  }
}

0 ответов

Немного поздно, но я недавно тоже столкнулся с этой проблемой. Решение, которое вы имели, было близко, но я обнаружил, что используя ngDoCheck не работал Удалите это, и это соединяет как ожидалось.

Другие вопросы по тегам