Current theme: ${this.goBright ? 'bright' : 'dark'}
`; } } ``` `goBright` 反映为 `gobright` 属性在主机元素上,所以主题可以在没有 JavaScript 或每值的平面 CSS 中被样式化 `bdTheme()` 配对 : ```typescript public static styles = [ css` :host { background: #000; } :host([gobright]) { background: #fff; } `, ]; ``` 主题切换时属性会自动更新 。 一个元素在连接时取出生效的主题,所以它的第一个渲染已经在这个主题中,没有颜色从黑暗的默认中消失. 一个元素创建于 `ignoreGlobal` 遵循它自己的多姆工具,一旦它被设置,它的主题就会被采纳. ### \* 生命周期帮助者 `DeesElement` 在 LitElement 上添加生命周期公用事业: ```typescript @customElement('my-widget') class MyWidget extends DeesElement { constructor() { super(); // Runs for each connection, after the previous connection has finished cleanup. this.registerStartupFunction(async (signal) => { if (signal.aborted) return; console.log('Widget connected!'); }); // Runs when the element is disconnected — perfect for cleanup this.registerGarbageFunction(() => { console.log('Widget removed'); }); } render() { return html`Hello World
`; } } ``` 此外, `this.elementDomReady` 一个承诺,在之后解决 `firstUpdated`,这在等待初始渲染时是有用的: ```typescript await this.elementDomReady; // The element's shadow DOM is now fully rendered ``` 启动钩接受 `AbortSignal` 在删除时同步中止。 用这个 取消支持取消的工作。 已经运行的虎克可以安顿下来; 垃圾钩在下次连接开始前完成。 登记钩,通常一次 在建筑师。 由起动钩所创造的资源属于这种连接. 指令断开 `rxSubscriptions` 删除时立即取消订阅. 完成启动后加入的订阅在清理完成前被排出. 每条垃圾钩都尝试过,即使再扔一次;返回的断开承诺 以 `AggregateError`,以后的连接仍然可以运行。 子类应 立即拨打超阶级的生命周期方法,等待它回归的承诺 开始一个同步的工作. 这个 `resolve` 指令无视陈旧的承诺,保留有待清除的工作,以及 使当前承诺在重新连接后实现,即使承诺在分离时已经实现. ### 语言 `localize` 财务报告和审定财务报表 `provideI18n` 组件表达其软件包目录中的单词,一个键入 [`@push.rocks/smarti18n`](https://code.foss.global/push.rocks/smarti18n) iCU消息目录. 应用程序 通过提供 `I18n` 实例; 下方的每个组件在变化时重递. **1\. 一揽子组成部分界定其目录** (关于消息、翻译和检查,见smarti18n读取器): ```typescript import { defineCatalog } from '@push.rocks/smarti18n'; export const messages = defineCatalog({ namespace: '@my/components', source: 'en', messages: { counter: 'Step {current, number} of {total, number}', help: 'Read the guide.', }, }); messages.addTranslation('de', () => import('./messages.de.js')); ``` **2\. 构成部分的用词是: `localize`数字 :** ```typescript import { DeesElement, customElement, html, localize } from '@design.estate/dees-element'; import { messages } from './messages.js'; @customElement('my-stepper') class MyStepper extends DeesElement { private t = localize(this, messages); render() { return html` ${this.t('counter', { current: 2, total: 4 })}${this.t.rich('help', { link: (chunks) => html`${chunks}` })}
${this.t.format.number(1234.5)} `; } } ``` - 键和参数为: `this.t('counter', { current: 2 })` 财务报告和审定财务报表 `this.t('countr')` 正在编译错误. - `this.t.format` 用目录格式写数字、钱、日期、列表和相对时间 写进,所以它总是同意 数字内的信息,和 `this.t.i18n` 元素为实例 现在说话. **3\. 该应用程序提供了其实例**打开 `` 因此,附件中的要点 `document.body` (模式,菜单)找到它 还有: ```typescript import { createI18n } from '@push.rocks/smarti18n'; import { provideI18n } from '@design.estate/dees-element'; const i18n = createI18n({ locale: 'de-DE' }); provideI18n(document.documentElement, i18n, { reflect: true }); // keeps in step await i18n.setLocale('en-GB'); // every localized element re-renders in English ``` 它的行为: - **没有供应商** a 元素表达其目录的源语言(smarti18n's `sourceI18n`) (中文(简体) ). 提供商 因此设置顺序并不重要. - **自己的倒计时:** `localize(this, messages, { fallback })` 说话 `fallback` 改为 `sourceI18n` 没有 供应商为要件服务,在供应商被处置时也是如此。 组件库保存自己的格式 这样一来,直到一个主机提供语言,例如没有分组的数字,在消息和 `t.format` 类似: ```typescript import { createSourceI18n, Formats } from '@push.rocks/smarti18n'; class UngroupedFormats extends Formats { public override intlNumberFormat(options: Intl.NumberFormatOptions): Intl.NumberFormat { return super.intlNumberFormat({ useGrouping: false, ...options }); } } const neutral = createSourceI18n({ createFormats: (settings) => new UngroupedFormats(settings) }); // in the component private t = localize(this, messages, { fallback: neutral }); ``` - **一个子树可以说另一种语言:** `provideI18n(previewElement, documentI18n)` 为下列要素服务 `previewElement` (文档预览,并列演示). 在一个 `DeesElement` 主办供应商与东道方住在一起; `reflect` 套装 `lang` 财务报告和审定财务报表 `dir` 当它连接时. `provider.i18n = other` 将子树另一只 举个例子. `provider.dispose()` 停止提供者并恢复其主机 `lang` 财务报告和审定财务报表 `dir`;平原上的供货商 元素,例如 ``住到那时. - **封面可以说开口语:** 提供者服务于主机下方的元素, 绝不是主机本身的 `localize()` 词. `provideI18n(overlay, openerI18n, { includeHost: true })` 也为东道主服务: 它使发言的内容 `openerI18n` 除页面外,请遵循一个本地端口或 `provider.i18n = other`,以及 返回页面语言 `provider.dispose()`。无论主机已经连接还是连接,它都有效 等会. - **话还没说完.** `DeesElement.scheduleUpdate()` 等待元素使用的目录 为它的语言加载,所以一个懒散定义的目录从不首先显示它的源词. 它只是等待 语言 仍然要加载 : 每个单词加载后, 更新是同步的, 所以一个本地化的孩子, 由父母所制作 电流,一旦父母的 `updateComplete` 决定。 无法加载的单词拒绝 `updateComplete` (与 翻译本身的失误,在 `AggregateError`; 下一次更新再次尝试. 覆盖的子类 `scheduleUpdate()` 必须呼叫 `super.scheduleUpdate()`。 。 。 . - **无有漏出.** 一个元素订阅其提供者,并在连接和断开时取消订阅. - **右为左.** `i18n.direction` 实值 `rtl` 阿拉伯语、希伯来语、波斯语和假语言 `ar-XB`; 与 `reflect`, (中文(简体) ), `dir="rtl"` 翻出一页. `en-XA` (单位:千美元)`createI18n({ locale: 'en-XA', pseudo: true })`显示已剪辑或 未译正文一览. - 情况是 `i18nContext` (Web组件上下文协议,通过 `@lit/context`),按键 `Symbol.for('dees.i18n')`,所以每一份页面中的这个软件包都共享. ### \* 指令 这个 `directives` 命名空间包括强大的模板助手,可通过 `directives.*`数字 : #### `resolve` ——兑现承诺 ```typescript import { html, directives } from '@design.estate/dees-element'; render() { return html`${directives.resolve(this.fetchData())}`; } ``` #### `resolveExec` 解决懒惰的合成功能 ```typescript render() { return html`${directives.resolveExec(() => this.loadContent())}`; } ``` #### `subscribe` - 显示 RxJS 观测器 ```typescript import { html, directives } from '@design.estate/dees-element'; render() { return html`${directives.subscribe(this.count$)}`; } ``` #### `subscribeWithTemplate` ——可观察+模板转换 ```typescript render() { return html` ${directives.subscribeWithTemplate( this.items$, (items) => html`