在自定义 Polymer/Typescript 元素中使用自定义行为会引发 Uncaught ReferenceError

Question

我尝试根据 PolymerTS docs 创建和使用我自己的行为，但抛出 Uncaught ReferenceError（ListViewBehavior 未定义）。

这是我的行为 (list-view/list-view-behavior.ts):

class ListViewBehavior extends polymer.Base {
  ...

这就是我的使用方式 (asset-list.ts):

/// <reference path="list-view/list-view-behavior.ts"/>
@component('asset-list')
@behavior(ListViewBehavior)
class AssetList extends polymer.Base implements {
  ...

如果我在同一个文件中添加该行为 (asset-list.ts)，它会起作用。

Answer 1

我刚试过你的代码。有趣的是，定义 ListViewBehavior class 而不导出它允许构建成功而不会出现警告或错误。当我尝试创建使用该行为的组件时，ReferenceError 发生在运行时。

修复方法是将此导入添加到我组件的 class 文件中：

import 'list-view/list-view-behavior';

出现这种情况时会强制出现编译错误的更清晰的修复方法是导出行为的 class:

// In list-view/list-view-behavior.ts ...
export class ListViewBehavior extends polymer.Base {...}

并在组件文件中导入：

// In asset-list.ts ...
import {ListViewBehavior} from 'list-view/list-view-behavior';

Answer 2

为了完整起见，以下是最终对我有用的方法。（当我有时间时，我会尝试 polymer-typescript-starter-kit，因为我的解决方案不是很好。）

首先，我必须创建一个模块：

module CMSBehaviors {
   export class ListViewBehavior extends polymer.Base {
   ...
  }
}

那我就可以直接用了:

@behavior(CMSBehaviors.ListViewBehavior)

在elements.html中，我添加了以下内容：

<script src="../bower_components/polymer-ts/polymer-ts.min.js"></script>
<script src="../services/cms-behaviors.js"></script>

polymer-ts.min.js 是必需的，因为行为从 polymer.Base 扩展而来。

在自定义 Polymer/Typescript 元素中使用自定义行为会引发 Uncaught ReferenceError

Using a custom behavior in a custom Polymer/Typescript element throws Uncaught ReferenceError

typescript

polymer

polymer-1.0