我试图覆盖lit-element中的set属性。 我正在使用Typescript,并且正在自定义元素中使用装饰器设置值,尽管当我尝试通过在index.html中设置其他属性来覆盖元素时,它不会覆盖... 当我console.log属性时,它只有在lit-element中设置的属性。 ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我正在处理的特定元素有问题。 并且由于某种原因,该选项不允许我在html标记上指定任何属性值。
如果我在构造器中指定默认值,则该元素可以很好地使用这些默认值,但是我无法通过声明性html覆盖默认值。
这是元素:
class OstinatoFetchTriggers extends LitElement {
static get properties() {
return {
/**
* The query selector for the `ostinato-fetch` element to use when
* making the request.
*/
xhrSelector: { type: String },
/**
* Elements with the trigger selector will have their click event
* intercepted and will make the request via ostinato-fetch
*/
triggerSelector: { type: String },
};
}
constructor() {
super();
this.xhrSelector = '#xhrContent';
this.triggerSelector = '[xhr-link]';
}
connectedCallback() {
super.connectedCallback();
// The output for console log below is null or whatever the default was in the contructor.
console.log(this.triggerSelector);
var triggerList = document.querySelectorAll(this.triggerSelector);
triggerList.forEach((trigger) => {
trigger.addEventListener('click', this._handleXhrClick.bind(this));
});
}
disconnectedCallback() {
super.disconnectedCallback();
var triggerList = document.querySelectorAll(this.triggerSelector);
triggerList.forEach((trigger) => {
trigger.removeEventListener('click', this._handleXhrClick.bind(this));
});
}
_handleXhrClick(ev) {
ev.preventDefault();
this.triggerRequest(ev.currentTarget.href);
}
triggerRequest(href) {
document.querySelector(this.xhrSelector).fetch(href);
}
}
customElements.define('ostinato-fetch-triggers', OstinatoFetchTriggers);
我尝试使用上述元素: <ostinato-fetch-triggers xhr-selector="#somethingElse"></ostinato-fetch-triggers>
。
我期望的是元素中的xhrTriggers属性应该为#somethingElse
,但事实并非如此。 它基本上只使用构造函数中的默认值。
首先:由于lit-element没有像在Polymer 2中那样通过将驼峰大小写转换为破折号来将属性名称映射为属性名称的概念,因此,如果声明xhrSelector
,则必须使用:
<ostinato-fetch-triggers xhrSelector="#somethingElse"></ostinato-fetch-triggers>
第二: connectedCallback
是不是从lit-element
发出的本机生命周期回调 ,这意味着无法保证何时调用lit-element
已经设置了属性。 如果您希望每次更改属性时都做出反应,则可以使用firstUpdated(changedProperties)
或update(changedProperties)
。
查看更多有关轻元素生命周期的信息 。
第三:在disconnectedCallback
,您似乎想要删除侦听器,但这将不起作用,因为每次执行bind
函数时,它将返回新函数,这意味着您尝试删除以前从未添加的函数。
您应该将监听器保持在某个变量中
let listener = this._handleXhrClick.bind(this)
trigger.addEventListener('click', listener)
this.listeners.push({ trigger, listener })
然后在disconnectedCallback
this.listeners.forEach(({ trigger, listener }) => {
listener.removeEventListener('click', listener)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.