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
не работал Удалите это, и это соединяет как ожидалось.