typescript – 使用Angular 2与Polymer的双向数据绑定

2019年7月20日 249次阅读

我正在尝试将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: Expression ‘tabNr in AppComponent@2:17’ has changed after
it was checked. Previous value: ‘1’. Current value: ‘1’ in [tabNr in
AppComponent@2:17]

我假设可能正在进行某种循环事件.我可以通过使用(选择更改的)事件的方法来解决这个问题,如果事件的数量实际上是一个不同的数字,它只会改变它,但是整个方法看起来很麻烦,而且我从简单地使用[()得到了很多]绑定数据.

所以我的问题是：
有更好,更清洁的方法吗？

最佳答案 双向绑定的正确方法是

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

要么

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

Plunker example

为了避免“表达式自上次检查后发生了变化”警告我必须将event.detail.value解析为数字.

对于

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

要工作Polymer需要发送一个不同的事件selectedChange而不是selected-changed,事件需要是值1而不是自定义事件.

点赞