Skip to content

事件

VoerkaI18ni18nScope提供了一些事件来侦听语言切换、语言包加载等事件。

  • VoerkaI18n实例继承自一个LiteEventEmitter类,可以通过on/off/once方法来侦听事件。
  • i18nScope引用了全局VoerkaI18n实例的on/off/once方法

ready

i18nScope实例完成第一次语言切换时会触发ready事件,相当于第一次触发change事件。

  • 此方法一般用在Vue/React等应用中,用来等待语言包加载完成再进行初始化。
  • ready事件只会触发一次,之后再次切换语言不会再触发。
  • ready事件具备retain特性,即如果在ready事件触发后再订阅了ready事件,也可以侦听到ready事件。
  • 引入ready事件是因为语言包可能是异步加载的,如果在语言包加载完成前就开始使用t函数,可能会导致翻译不准确。因此,可以在ready事件中初始化应用。
  • ready事件回调函数:({language,scope})=>void,其中language是当前语言,scope是当前作用域id
typescript
import { i18nScope } from "./languages"

i18nScope.on("ready",({language,scope})=>{    
    const app = createApp(App)    
    app.mount('#app')
})

也可以使用快捷方式:

typescript
import { i18nScope } from "./languages"

i18nScope.ready(()=>{    
    const app = createApp(App)    
    app.mount('#app')
})

change

当切换语言时会触发change事件。

当每次调用i18nScope.changeVoerkaI18n.change方法时,VoekaI18n会进行语言包加载和切换,加载远程语言补丁,存储语言参数等一系列操作,然后完成后再触发change事件。

typescript

import { i18nScope } from "./languages"

i18nScope.on("change",(newLanguage)=>{
    // 语言切换完成,可以在此重新渲染界面
    // ...
})

restore

每次切换语言(包括初始化时),VoerkaI18n均会从存储中恢复语言补丁,然后触发restore事件。

typescript

i18nScope.on("restore",({language,scope})=>{
    // 从存储中恢复语言补丁完成
    // ...
})

patched

每次切换语言(包括初始化时),VoerkaI18n均会远程服务器加载语言补丁,然后触发patched事件。

typescript

i18nScope.on("patched",({language,scope})=>{
    // 从存储中恢复语言补丁完成
    // ...
})

支持的事件

ts
export type VoerkaI18nEvents = {
    // 当有日志输出时
    log             : { level: string, message:string }                  
    // 当第一个应用Scope注册时触发
    init            : ()=>string                                             
    // 当初始化切换完成后触发
    ready           : string                                             
    // 当语言切换后时, payload=language
    change          : string                                             
    // 当Scope加载并从本地存储中读取语言包合并到语言包时 ,data={language,scope}
    restore         : { scope:string,language:string }                   
    // 当Scope加载并从本地存储中读取语言包合并到语言包时 ,data={language,scope}    
    patched         : { scope:string,language:string }                   
    // 当有错误发生时    
    error           : Error                                              
    "scope/change"  : { scope:string,language:string }                   
    // 当切换到无效的语言或者加载失败时,进行回退
    "scope/fallback": { scope:string,from:string,to:string}             
}