typescript - 将 Angular 2 双向数据绑定(bind)与 Polymer 结合使用

Question

我正在尝试将 Polymer 元素与 Angular 2 相结合，但我在双向数据绑定(bind)方面遇到了困难。

例如，我使用 paper-tabs 并显示当前正在使用的标签号。每当我更改选项卡时，我都希望该更改也发生在 AppComponent 的 tabNr 字段中。每当我单击正在显示的选项卡编号时，我都希望该编号发生变化并相应地更改选项卡。我最初的方法是这样的:

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

}

但是，这不起作用。我无法更改选项卡。我可以单击显示的选项卡编号来更改它，但这也没有反射(reflect)在实际选项卡中。在下文中，我将重点关注代码中的那一行，以讨论我尝试过的所有其他可能性:

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

我原以为数据绑定(bind)的一种方式(纸标签到 AppComponent)会像这样工作

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

但这行不通。要真正让更改注册，我需要像这样使用来自 Polymer 的事件:

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

这违背了使用 Angular 2 进行绑定(bind)的目的。在我看来，这里的问题是， polymer 正在为变化触发与 Angular 2 所期望的不同的事件。

为了让点击更改注册到选项卡，我必须这样做:

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

但是，我不能将这两个结果合并到这个中

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

因为每当我更改标签时都会收到以下异常:

EXCEPTION: Expression 'tabNr in AppComponent@2:17' has changed after it was checked. Previous value: '1'. Current value: '1' in [tabNr in AppComponent@2:17]

我假设可能正在进行某种循环事件触发。我可以通过对 (selected-changed) 事件使用一种方法来解决这个问题，该方法仅在事件的数量实际上是不同的数字时才更改它，但整个方法看起来很麻烦，我从简单地使用 [() ] 绑定(bind)数据。

所以我的问题是:是否有更好、更简洁的方法来执行此操作？

Answer 1

双向绑定(bind)的正确方法是

<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而不是自定义事件。