Question

我目前正在创建一个使用Typescript而不是Javascript的Web应用程序来查看Typescript的感受。我也在学习聚合物，一石二鸟。为了实现这一点，我正在使用PolymerTS来实现这一点，直到此时它已经正常工作。但是，我遇到了障碍。

我有两个元素，我们称之为'my-foo'和'my-bar'：

<link rel="import" href="path/to/my-bar.html">

<dom-module id="my-foo">
    <template>
        <my-bar myBarProperty="{{myFooProperty}}"></my-bar>
    </template>
</dom-module>

现在值'myFooProperty'是一个已从JSON反序列化为自定义Typescript类的值。如果我对它们进行数据绑定，我可以显示它的所有属性，例如

<h1>{{myFooProperty.name}}</h1>

但是将它传递给第二个自定义元素不起作用，即“myBarProperty”为null或空映射。元素已正确加载（任何未加载和显示特定于数据的html），但未设置值本身。对此为何的见解？也许这是不可能的？

相关* .ts文件：

MY-foo.ts：

@component("my-foo")
class MyFoo extends polymer.Base {
    @property({ type: Object, notify: true })
    myFooProperty: any;

    constructor() {
        super();
        apiCallThatReturnsPromise().then(value => {
            this.myFooProperty = value;
        });
    }
}

MyFoo.register();

my-bar.ts：

@component("my-bar")
class MyBar extends polymer.Base {
    @property({ type: Object, notify: true, value: function() { return {}; } })
    myBarProperty: any;
}

MyBar.register();

编辑1 ：我确实看到如果不反序列化JSON并仅传递原始数据将解决我的问题，但事实并非如此。

Answer 1

使用my-bar-property。

来源：https://www.polymer-project.org/1.0/docs/devguide/properties.html#property-name-mapping

Polymer / PolymerTS：将对象传递给自定义元素

1 个答案: