导入聚合物中的聚合物行为

时间:2015-09-16 03:12:47

标签: typescript polymer web-component

所以我使用PolymerTS将TypeScript与我的聚合物网络应用程序一起使用,但我不能在我的生活中弄清楚如何导入我的组件中存在的现有行为。

例如,如果我想在我的组件中使用普通聚合物组件中的IronControlState,我会:

<link rel="import" href="../bower_components/iron-behaviors/iron-control-state.html">

<template code>

Polymer({
 is: 'example-component',
 properties: {
   name: {stype: String},
   value: {type: String},
   valueShort: {
 },
 behaviors: [
   Polymer.IronControlState,
           ],

PolymerTS的文档说我应该只使用装饰器@behavior来为我的组件添加一个行为。如果行为是在我的ts代码中导入的某些TypeScript代码中定义的,那么这很好。但对于聚合物内置的行为,我迷失了。

如果我只是尝试:

declare var Polymer: {IronControlState: {focused: boolean} };

@component('example-component')
@behavior(Polymer.IronControlState)
export class ExampleComponent extends polymer.Base {

在我的HTML中使用相同的导入,我在浏览器的控制台中收到以下错误:

[example-component::_flattenBehaviorsList]: behavior is null, check for missing or 404 import

这告诉我,它没有找到我要求的行为......

但是,绝对正在加载Polymer.IronControlState。从.ts我可以补充:

ready() {
  console.log(Polymer.IronControlState);
}

并输出:Object {properties:Object,observers:Array [1]}

但是如果我尝试记录这个。聚焦它输出'undefined'。

帮助!谢谢!

2 个答案:

答案 0 :(得分:1)

事实证明,只有TypeScript Classes支持添加行为。最新版本添加了一个修复程序来支持泛型函数的行为:

https://github.com/nippur72/PolymerTS/issues/56

答案 1 :(得分:0)

  

这告诉我,它没有找到我要求的行为......

事实上。您仍然需要在模板中添加<link rel="import" href="../bower_components/iron-behaviors/iron-control-state.html">