Использование Угловой 2 двусторонней передачи данных с помощью полимера

Question

Я пытаюсь объединить элементы полимера с углом 2, и я борюсь с двусторонним аспектом привязки данных.

В качестве примера я использую бумажные вкладки и отображаю номер вкладки, который в настоящее время используется. Всякий раз, когда я изменяю вкладку, я хочу, чтобы это изменение происходило и в поле tabNr в AppComponent. Всякий раз, когда я нажимаю на отображаемый номер вкладки, я хочу, чтобы номер менялся и соответствующим образом менял вкладку. Мой первоначальный подход заключается в следующем:

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; 
    } 

} 

Однако это не работает. Я не могу изменить вкладки. Я могу щелкнуть отображаемый номер вкладки, чтобы изменить это, но это также не отражается в фактических вкладках. В дальнейшем я сосредоточусь на этой линии в коде, чтобы обсудить все другие возможности я опробовал:

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

Я ожидал, что один способ привязки данных (бумажные закладки собираются в AppComponent) будет работать как это

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

но это не работает. Чтобы действительно получить изменения в регистрацию, мне нужно использовать событие из полимера, как это:

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

Это поражение цели с помощью Угловых 2 для вязок. Мне кажется, что проблема заключается в том, что полимер запускает другое событие для изменения, чем любой, что ожидает Угловой 2.

Для того, чтобы получить клик-изменения, чтобы зарегистрировать с вкладками, которые я должен сделать это:

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

Однако, я не могу совместить оба этих результата в этом

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

, потому что я получайте следующее исключение, когда я меняю вкладку:

ИСКЛЮЧЕНИЕ: вкладка Expression в AppComponent @ 2: 17 'изменилась после было проверено. Предыдущее значение: '1'. Текущее значение: '1' в [tabNr в AppComponent @ 2: 17]

Я предполагаю, что есть, вероятно, какое-то круговое событие стрельбы происходит. Я могу решить эту проблему, используя метод для события (выбранное-измененное), которое только изменяет его, если номер события на самом деле является другим числом, но весь этот подход кажется громоздким, и я получил совсем немного, просто используя [() ] для привязки данных.

Так что мой вопрос: Есть ли лучший, более чистый способ сделать это?

Answer 1

Правильный путь для двухсторонним связывания является

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

или

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

Plunker example

Чтобы избежать «выражение изменилось с момента его последней проверки» предупреждение я имел для анализа event.detail.value до number.

Для

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

работать Polymer будет необходимо отправить другое событие selectedChange вместо selected-changed и события должны были бы быть значение 1 вместо пользовательского события.