javascript - 需要使用双向绑定(bind)的Angular 2升级的工作示例

该文件：

https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angularjs-component-directives-from-angular-code

说以下内容：

作为双向绑定：

<my-component [(myValue)]="anExpression">

在我的案例中，ng-1.5组件使用双向绑定，因此无法替换简单的单向绑定。我正在尝试编写ng2包装器。

<ng2-wrapper [(source)]="ng2Value"></ng2-wrapper>

但是，即使在组件内更改了源，也不会更新ng2Value。 Ng2WrapperComponent具有“ @Input source”，并且我尝试了包含“ @Output sourceChange”的变体，但无法提供任何可更新ng2Value的东西。

有人有可行的例子吗？

最佳答案

这是我同事的一个工作示例：

angularJsWrapperComponent.ts（新的Angular组件）：

...
template: `
    <angular-js-component
      [(canDeactivate)]="this.canDeactivate">
    </angular-js-component>`
...

export class AngularJsWrapperComponent implements {
private canDeactivate: boolean;
...

angularJsWrapperComponentDirective.ts：

...
@Directive({ selector: 'angular-js-component' })
export class AngularJsComponentWrapperDirective extends UpgradeComponent {
  @Input() canDeactivate: boolean;
  @Output() canDeactivateChange: EventEmitter<boolean>;

  constructor(elementRef: ElementRef, injector: Injector) {
    super('originalAngularJsComponent', elementRef, injector);
  }

}
...

originalAngularJsComponent.ts（您要升级的AngularJs组件）：

...
bindings: {
        canDeactivate: '='
    }
...