问题描述
我正在处理一个私人项目。
由于某种原因,无论父母或祖父母的属性如何变化,孙子都不会渲染。减去插槽的所有内容都会呈现正确的转换。翻译功能也可以使用,但是孙子拒绝渲染。
该项目需要下拉菜单才能更改语言。语言环境将通过属性向下传递。我已经验证了语言环境确实在孙代中更新了。
我在多个级别尝试过requestUpdate
,但无法让孙子重新渲染广告位。
index.html:
<body>
Locale:
<select id="localeSelector">
<option value="en_US" selected>en-us</option>
<option value="es_MX">es-mx</option>
</select>
<my-element id="component"></my-element>
</body>
index.js:
import { LitElement,html,css } from "lit-element";
class ParentComponent extends LitElement {
constructor() {
super();
this.__localeStrings = { test: "testing" };
this.locale = "en_US";
}
update(changedProps) {
super.update(changedProps);
console.log("Parent: " + this.locale);
}
translate(key) {
return this.__localeStrings[key];
}
static get properties() {
return {
locale: { type: String }
};
}
render() {
return html`
<child-component .locale=${this.locale}></child-component>
`;
}
}
customElements.define("my-element",ParentComponent);
class ChildComponent extends LitElement {
static get properties() {
return {
locale: { type: String }
};
}
constructor() {
super();
this.__localeStrings = { en_US: "Hi",es_MX: "Hola",test: "testing" };
}
update(changedProps) {
super.update(changedProps);
console.log("Child: " + this.locale);
}
translate(key) {
return this.__localeStrings[key];
}
render() {
return html`
<p>Always works: ${this.translate(this.locale)}</p>
<great-child-component .locale=${this.locale}
><div name="content">
${this.translate(this.locale)}
</div></great-child-component
>
`;
}
}
customElements.define("child-component",ChildComponent);
class GreatChildComponent extends LitElement {
static get properties() {
return {
locale: { type: String }
};
}
constructor() {
super();
}
update(changedProps) {
super.update(changedProps);
console.log("Great Child: " + this.locale);
}
render() {
return html`
<div>Current translation: <slot name="content"></slot></div>
`;
}
}
customElements.define("great-child-component",GreatChildComponent);
const localeSelector = document.querySelector("#localeSelector");
const mainElement = document.querySelector("#component");
/* ********************
*** LOCALE SELECTOR ***
********************** */
const localeChangedActions = [];
localeChangedActions.push(locale => {
mainElement.setAttribute("locale",locale);
});
localeSelector.onchange = () => {
for (const action of localeChangedActions) {
action(localeSelector.value);
}
};
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)