Question

我正在尝试将Polymer元素与Angular 2结合起来，并且我在双向数据绑定方面遇到了困难。

作为示例，我使用纸质标签并显示当前正在使用的标签号。每当我更改选项卡时，我都希望在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;
    }

}

然而，这不起作用。我无法更改标签。我可以单击显示的选项卡号来更改它，但这也不会反映在实际选项卡中。在下文中，我将重点关注代码中的那一行，以讨论我尝试过的所有其他可能性：

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

我期待单向数据绑定（纸质标签转到AppComponent）会像这样工作

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

但这不起作用。要实际获取注册的更改，我需要使用Polymer中的事件，如下所示：

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

这违背了使用Angular 2进行绑定的目的。在我看来，这里的问题是，聚合物正在为变化发射一个不同于Angular 2预期的事件。

为了让点击更改注册到标签我必须这样做：

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

但是，我无法将这两个结果合并到此

中

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

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

EXCEPTION：AppComponent @ 2：17中的表达式'tabNr'在之后发生了变化它被检查了。上一个值：'1'。当前值：[tabNr in中的'1' 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而不是自定义事件。

使用Angular 2与Polymer聚合的双向数据

1 个答案: