在 polymerTS 中导入聚合物行为
importing polymer behavior in polymerTS
所以我使用 PolymerTS 将 TypeScript 与我的 polymer web 应用程序一起使用,但我终究无法弄清楚如何将现有行为导入我的组件。
例如,如果我想在普通聚合物组件的组件中使用 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 代码中定义的,那么这很好。但是对于 Polymer 内置的行为,我迷路了。
如果我尝试:
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]}
但是如果我尝试记录 this.focused 它会输出 'undefined'.
求助!谢谢!
which suggests to me that it's not finding the behavior I'm asking for...
确实如此。您仍然需要在模板中添加 <link rel="import" href="../bower_components/iron-behaviors/iron-control-state.html">
。
原来只有 TypeScript 类 支持添加行为。最新版本添加了一个修复程序以支持通用函数的行为:
所以我使用 PolymerTS 将 TypeScript 与我的 polymer web 应用程序一起使用,但我终究无法弄清楚如何将现有行为导入我的组件。
例如,如果我想在普通聚合物组件的组件中使用 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 代码中定义的,那么这很好。但是对于 Polymer 内置的行为,我迷路了。
如果我尝试:
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]}
但是如果我尝试记录 this.focused 它会输出 'undefined'.
求助!谢谢!
which suggests to me that it's not finding the behavior I'm asking for...
确实如此。您仍然需要在模板中添加 <link rel="import" href="../bower_components/iron-behaviors/iron-control-state.html">
。
原来只有 TypeScript 类 支持添加行为。最新版本添加了一个修复程序以支持通用函数的行为: