3

我有一个大型应用程序，我刚刚开始升级到 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);
  }
}
4

1 回答 1

1

有点晚了，但我最近也遇到了这个问题。您的解决方案很接近，但我发现 usingngDoCheck不起作用。删除它，它按预期接线。

于 2019-01-11T21:29:23.483 回答