typescript - Bruke Angular 2 toveis databinding med Polymer

Jeg prøver å kombinere Polymer-elementer med Angular 2, og jeg sliter med aspektet ved toveis databinding.

Som et eksempel bruker jeg papirfaner og viser fanenummeret som for øyeblikket er i bruk. Hver gang jeg bytter en fane, ønsker jeg at den endringen også skal skje i et tabNr-felt i AppComponent. Når jeg klikker på fanenummeret som vises, vil jeg at nummeret skal endres og endre fanen tilsvarende. Min opprinnelige tilnærming var denne:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `
                <paper-toolbar>
                    <paper-tabs [(selected)]="tabNr">
                        <paper-tab>Tab 1</paper-tab>
                        <paper-tab>Tab 2</paper-tab>
                        <paper-tab>Tab 3</paper-tab>
                    </paper-tabs>
                </paper-toolbar>
                <paper-toolbar>
                    <div (click)="traverse()">Tab {{tabNr + 1}}</div>
                </paper-toolbar>
                `
})
export class AppComponent {
    tabNr = 0;

    traverse() {
        this.tabNr = (this.tabNr + 1) % 3;
    }

}

Imidlertid fungerer ikke dette. Jeg kan ikke endre fanene. Jeg kan klikke på fane-tallet som vises for å endre det, men det gjenspeiles heller ikke i de faktiske fanene. I det følgende vil jeg fokusere på den linjen i koden for å diskutere alle andre muligheter jeg har prøvd:

<paper-tabs [(selected)]="tabNr">

Jeg forventet at enveis databinding (paper-tabs som går til AppComponent) ville fungere slik

<paper-tabs (selected)="tabNr">

men det fungerer ikke. For å faktisk få endringene til å registrere, må jeg bruke hendelsen fra Polymer slik:

<paper-tabs selected="tabNr" (selected-changed)="tabNr=$event.detail.value">

Det motvirker hensikten med å bruke Angular 2 for bindingene. Det virker for meg som om problemet her er at Polymer utløser en annen hendelse for endringen enn det Angular 2 forventer.

For å få klikk-endringene til å registrere seg med fanene må jeg gjøre dette:

<paper-tabs [attr.selected]="tabNr">

Men jeg kan ikke kombinere begge disse resultatene i dette

<paper-tabs [attr.selected]="tabNr" (selected-changed)="tabNr=$event.detail.value">

fordi jeg får følgende unntak hver gang jeg bytter en fane:

UNNTAK: Uttrykket 'tabNr i AppComponent@2:17' har endret seg etter at det ble sjekket. Tidligere verdi: '1'. Nåværende verdi: '1' i [tabNr i AppComponent@2:17]

Jeg antar at det sannsynligvis foregår en form for sirkulær hendelsesutløsning. Jeg kan løse dette ved å bruke en metode for (selected-changed)-hendelsen som bare endrer det hvis tallet på hendelsen faktisk er et annet nummer, men hele den tilnærmingen virker tungvint, og jeg fikk ganske mye ut av å bare bruke [()] for å binde dataene.

Så mitt spørsmål er: Finnes det en bedre, renere måte å gjøre dette på?

Svar #1

Den riktige måten for toveis binding er

<paper-tabs [attr.selected]="tabNr" (selected-changed)="updateTab($event)">

eller

<paper-tabs attr.selected="{{tabNr}}" (selected-changed)="updateTab($event)">

Plunker-eksempel

For å unngå advarselen «uttrykket har endret seg siden det sist ble sjekket» måtte jeg parse event.detail.value til number.

For

<paper-tabs [(selected)]="tabNr">

For å fungere måtte Polymer sende en annen hendelse selectedChange i stedet for selected-changed, og hendelsen måtte være verdien 1 i stedet for en tilpasset hendelse.

Relaterte artikler