besoin d'un exemple de travail de mise à niveau angulaire 2 en utilisant deux voies bindin

Question

Le document:

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

dit le texte suivant:

En liant les deux sens:

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

Dans mon cas, le composant ng-1.5 utilise la liaison bidirectionnelle, de sorte qu'une simple liaison unidirectionnelle ne peut pas être substituée. J'essaye d'écrire un wrapper ng2.

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

Toutefois, ng2Value n'est jamais mis à jour, même si la source est modifiée dans le composant. Ng2WrapperComponent a '@Input source' et j'ai essayé des variantes qui incluent '@Output sourceChange', mais je ne trouve rien qui mette à jour ng2Value.

Est-ce que quelqu'un a un exemple de travail?

Answer 1

Voici un exemple de travail de mon collègue:

angularJsWrapperComponent.ts (votre nouveau composant angulaire):

... 
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 (vous r Composant AngularJs que vous souhaitez mettre à niveau):

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