Single page application internationalization system based on Anglar technology

Abstract

The invention discloses a single page application internationalization system based on the Anglar technology, and relates to the technical field of application internationalization, and the system is characterized in that a browser language environment management module is integrated into a browser operation environment, is responsible for obtaining and storing language environment information during system loading, and provides basic data for an internationalization service module; the internationalization service module provides a translation method and internationalization operation logic of a controlled project; the internationalization language package module constructs multi-language translation content; the front-end HTML internationalized translation pipeline module applies a translation method to realize real-time translation of an HTML page text and ensure that interface display is adaptive to a language environment; the TypeScript text translation module completes text internationalization conversion in a code layer; the Anglar interceptor module ensures that interaction languages at the front end and the rear end are consistent; the token injection configuration module provides an adaptive token for the internationalization service module; and the root component language switching response module monitors language switching and ensures smooth updating of interface languages. The internationalization ability and the user experience of the application program can be improved.

Description

Technical Field

[0001] The present invention relates to the technical field of application internationalization, and specifically to a single-page application internationalization system based on Angular technology. Background Art

[0002] With the acceleration of the globalization process, the user group of Internet applications is becoming increasingly extensive, and the internationalization requirements of software systems from users in different countries and regions using different languages are becoming more and more urgent. In the prior art, in order to achieve internationalization support for software systems, developers usually take a series of measures, but these measures have many defects.

[0003] Traditional internationalization implementation methods often lack a systematic and efficient language environment management mechanism. On the browser side, when loading the system, most simply rely on the browser's default language setting, without fully considering the user's personalized language selection preference and the flexibility requirement of subsequent language switching. For example, many applications do not effectively judge and utilize the language environment information in the browser storage (such as cookie) when initially loaded, resulting in the inability to accurately adapt to the language environment expected by the user. Moreover, once the user wants to switch languages during use, it is difficult for the prior art to update the language environment information in real time and accurately, so that when the system reloads the page or refreshes the interface, it cannot present the corresponding web page resources according to the new language environment, greatly affecting the user experience and unable to meet the user's expectation of smoothly switching languages at any time.

[0004] In terms of the implementation of the translation function, the prior art also has deficiencies. On the one hand, the translation method is relatively single, and most can only handle simple text translations. For complex texts containing variables, such as texts containing dynamic data, user-defined information, etc., there are no effective internationalization processing means. This makes it impossible to accurately translate and present in different language habits in actual business scenarios, such as personalized promotion copywriting in e-commerce systems, user dynamic messages in social applications, etc., resulting in inaccurate information transmission and even misunderstandings.

[0005] On the other hand, the coordination between the translation module in the prior art and other components of the system is poor. For example, it is difficult to ensure the language consistency between the front-end HTML page rendering and the back-end data interaction. When the front-end performs HTML text translation, it may not be synchronized with the language environment of the back-end data, resulting in inconsistent languages between the text displayed on the page and the data returned by the back-end, causing trouble to the user. At the same time, between different levels of code modules, such as text processing in TypeScript code and text processing in the front-end HTML page, there is a lack of unified coordination during the internationalization conversion process, each acting independently, increasing the development complexity and error probability, and it is also difficult to ensure the stable operation of the entire system in different language environments.

[0006] In addition, in the configuration and management of multilingual resources, the existing technologies lack a flexible adaptation mechanism. For the diverse requirements of multilingual data in different modules and different business scenarios, precise configuration cannot be achieved. For example, in the lazy loading module, if personalized translation files are required, it is very difficult for the existing technologies to provide a convenient and efficient implementation method. Often, complex additional code writing and configuration are needed, which not only consumes a large amount of development time but also easily introduces new errors, reducing the maintainability and scalability of the system.

[0007] In summary, the existing internationalization technical solutions have many defects in aspects such as language environment management, translation function implementation, module collaboration, and multilingual resource configuration, and it is difficult to meet the current complex and ever-changing internationalization application requirements. There is an urgent need for a new and systematic internationalization technical solution to overcome these problems, improve the internationalization level of software systems, and provide high-quality and smooth multilingual interaction experiences for global users. Summary of the Invention

[0008] In view of the current needs and deficiencies in the development of technologies, the present invention provides a single-page application internationalization system based on Angular technology to meet the internationalization requirements of modern large-scale SPAs, help enterprises or organizations more easily expand the global market, and enhance the international competitiveness of their products.

[0009] The technical solution adopted by the single-page application internationalization system based on Angular technology of the present invention to solve the above technical problems is as follows:

[0010] A single-page application internationalization system based on Angular technology, which includes:

[0011] A browser language environment management module, integrated into the running environment of the browser, used to manage the acquisition and storage of language environment information when the browser loads the system, and transmit the language environment information to the internationalization service module to provide it with the basic data of the current language environment;

[0012] An internationalization service module, used to provide internationalization translation methods, provide core internationalization function support for the entire project, and manage relevant operation logics;

[0013] An internationalization language pack module, used to construct and store the multilingual translation content required by the system in json format;

[0014] A front-end HTML internationalization translation pipeline module, used to utilize the internationalization translation methods provided by the internationalization service module to implement real-time internationalization translation of texts at the HTML page level, and provide an interface display that matches the current language environment for users;

[0015] The TypeScript text translation module is located in the TypeScript code of the project and is used to implement internationalization conversion of text at the TypeScript code level using the internationalization translation method provided by the internationalization service module;

[0016] Angular interceptor module, used to transmit language environment information during the interaction between the front-end and the back-end, to ensure that the data interaction between the front-end and the back-end can proceed smoothly in the language environment expected by the user;

[0017] The token injection configuration module is located in the providers array of the project's AppModule.ts file and is used to provide adaptive tokens and related configurations for the internationalization service module.

[0018] The root component language switching response module is set in the project's AppComponent root component to monitor and respond to language switching events in the system to ensure smooth interface language updates.

[0019] Optionally, the specific implementation process of the browser language environment management module involved includes:

[0020] When the browser first loads the system, it checks the cookies stored in itself to determine whether there are any records related to the language environment. If not found, it digs deep into the browser's navigate attribute to extract the current browser's language setting information, and then stores the information in a cookie of the current domain name in a standardized format;

[0021] When the user subsequently switches the language, the newly selected language environment value is updated to the cookie through the cookie update interface provided by the browser, so that when the browser loads the system again, it can accurately load the web page resources of the corresponding language environment based on the language environment value stored in the cookie, and finally generate the corresponding web page information.

[0022] Optionally, the specific implementation process of the international service module includes:

[0023] (1) Injection and initialization:

[0024] Relying on Angular's dependency injection mechanism, inject itself into the root level;

[0025] Accept the specified Angular injection token Token. The value associated with the token Token is the internationalization translation source. The internationalization translation source contains the internationalization language package required by the project and is used to store the multi-language translation content in json format required by the system.

[0026] Inject the initialization logic into the constructor. The initialization logic is executed when the module is instantiated to ensure that all necessary configurations of the internationalization service module are in place accurately at startup;

[0027] (2) Provide internationalization translation methods:

[0028] The internationalization translation method accepts two parameters, namely the code value and an optional JSON - formatted object parameter. Among them: a) According to the incoming code value, the internationalization translation method makes an exact match in the internationalization language pack to find the corresponding translation string; b) When there is an optional JSON - formatted object parameter, the internationalization translation method uses regular expressions to precisely match the keys in the JSON object with the pre - set marker keys in the translation language, and then replaces the corresponding value in the JSON object into the translation language to achieve the internationalization translation of variable - containing languages and meet the translation requirements in complex business scenarios;

[0029] (3) Language environment change notification mechanism:

[0030] The internationalization service module has a built - in Subject object. This Subject object is equipped with two functions. One function is used to trigger the next() method of the Subject object when the user switches the current language environment to send out a notification, and the other function is used to return a reference to the Observable form of this Subject, facilitating external modules to subscribe and listen to the dynamic changes of the language environment.

[0031] Further optionally, the specific implementation process of the involved internationalization language pack module includes:

[0032] Organize the language pack data in JSON format, and assign a clear code to each translation parameter as the property name of the JSON;

[0033] When the JSON property value is text, this text is the translation content corresponding to the code;

[0034] When the JSON property value is in the form of an object, it supports the incoming code to obtain the property value in the nested object in the form of "a.b"; where a and b represent the hierarchical structure of the object respectively.

[0035] Further optionally, the specific implementation process of the involved front - end HTML internationalization translation pipeline module includes:

[0036] During the HTML page rendering process, capture the text areas that need to be translated in real - time, receive the corresponding code value and optional parameters, and assemble them according to the requirements of the internationalization translation method provided by the internationalization service module;

[0037] After the parameter assembly is completed, call the internationalization translation method provided by the internationalization service module, pass in the assembled parameters, and the internationalization service module searches and obtains the corresponding translated text in the internationalization language pack module based on these parameters;

[0038] Immediately present the translated text at the corresponding position on the HTML page to achieve the internationalization presentation of the HTML part.

[0039] Further optionally, during the execution of the TypeScript code of the project, when encountering text that needs to be internationalized, the TypeScript text translation module starts to perform the following operations:

[0040] Receive the code value corresponding to this text, use this code value as the key index to locate the translation content in the internationalization service module; at the same time, when there are variables that do not need to be translated in this text, receive an optional json format object parameter;

[0041] Pass the received code value and the optional json format object parameter to the internationalization service module together; the internationalization service module performs translation processing on the text according to its internationalization translation method, and returns the internationalized text to the TypeScript text translation module after the translation is completed;

[0042] The TypeScript text translation module receives the translation result returned by the internationalization service module, ensures that in the TypeScript code, the relevant text is presented in a form that conforms to the current language environment, so as to achieve the internationalization conversion of the text at the TypeScript code level.

[0043] Further optionally, the involved Angular interceptor module is injected into the root module. When the front-end initiates an HTTP request, the Angular interceptor module quickly responds and immediately activates its interception function. The specific implementation process is as follows:

[0044] The Angular interceptor module first extracts the language environment information stored in the browser's cookie, and then adds the extracted information to the header of the request and sends it to the back-end;

[0045] When the back-end interface receives the request, it accurately retrieves in the database that is pre-defined and stores multi-language data according to the language environment information carried in the header, extracts the interface data corresponding to the current language environment from the retrieval result, and then returns these data to the front-end.

[0046] Further optionally, the involved token injection configuration module injects the tokens required by the internationalization service module by means of a preset factory function. The factory function intelligently filters from a large array of language json objects according to the current language environment information determined by the browser language environment management module, and selects the array corresponding to the current language environment;

[0047] During the filtering process, the token injection configuration module follows the preset priority rules. The preset priority rules are as follows:

[0048] a) Overwriting rule for non-object format: When the value corresponding to the key in the json object is in non-object format, the value corresponding to the same key that appears later will precisely overwrite the previous value;

[0049] b) Merging rule for object format: When the values corresponding to the keys in the json object are all in object format, the token injection configuration module will merge the attributes of these two objects;

[0050] After being processed by the above priority rules, the token injection configuration module provides the merged and optimized object value to the token required by the internationalization service module, providing strong data support for the normal operation of the internationalization service module.

[0051] Preferably, for the lazy-loaded modules existing in the project, if there is a need for personalized translation files, the token injection configuration module allows the lazy-loaded modules to refer to the mature introduction method in the AppModule, inject tokens in the provider array of their own modules, and provide a new object array for the tokens according to the specific requirements of their own business, meeting the diverse translation needs in different scenarios.

[0052] Further optionally, the involved root component language switch response module closely cooperates with the internationalization service module. The specific implementation process is as follows:

[0053] Introduce the monitoring function for the Subject object provided by the internationalization service module, add a subscription to this monitoring function, and always maintain the listening state for language environment changes;

[0054] When a language switch event is monitored during the subscription process, the root component language switch response module performs the following operations: modify the language environment information in the browser cookie and attempt to refresh the entire interface; if it is evaluated that the time required to refresh the interface is too long, use the local refresh mechanism of angular to refresh the root component. At this time, the internationalization service module needs to anticipate in advance and additionally add a method to switch the language pack required for the current language environment, so that when the AppComponent is locally refreshed, this method can be manually and precisely triggered according to the directive to quickly switch the language pack required for the current language environment;

[0055] During the process of gradually loading the page area, in coordination with the front-end HTML internationalization translation pipeline module, the TypeScript text translation module, and the method of requesting the back-end interface, comprehensively and dynamically update the content displayed on the system interface to ensure that the language of the interface seen by the user exactly matches the selected language environment and achieve a seamless switching experience.

[0056] A single-page application internationalization system based on Angular technology according to the present invention has the beneficial effects compared with the prior art as follows:

[0057] The present invention automatically detects and stores language environment information through the browser language environment management module. After the user switches the language, the corresponding web page resources can be accurately loaded, ensuring that the user always uses the system in the desired language environment without manual repeated settings, greatly improving the user experience; a unified and flexible international translation method is provided through the international service module, which can handle simple text translation and realize complex translation of variable languages ​​through regular expressions, meet the needs of diversified business scenarios, and ensure the accurate operation of the system in different language environments; the international language package module constructs and stores translation content in json format, with a clear structure and easy maintenance. By assigning each translation parameter a unique code value, it supports content acquisition in the form of simple text and nested objects, facilitating the team to add, modify and manage multilingual content; the front-end HTML international translation pipeline module and the TypeScript text translation module are implemented at the HTML page and TypeScript code levels respectively. Text internationalization ensures that the text in the entire application interface and code can be accurately translated, achieves language consistency between the front-end and back-end, and improves the professionalism and usability of the system; the Angular interceptor module transmits language environment information in the front-end and back-end interaction, and the back-end returns the interface data of the corresponding language based on this information, ensuring that the front-end and back-end data interaction is carried out in the language environment expected by the user, avoiding data display errors caused by language inconsistency; the token injection configuration module selects adaptation tokens according to the language environment, provides support for the internationalization service module, and provides personalized introduction methods for lazy loading modules to meet the diverse translation needs in different scenarios and enhance the scalability and adaptability of the system; the root component language switching response module works closely with the internationalization service module. After listening to the language switching event, it updates the cookie information, refreshes the interface, or partially refreshes the root component, and coordinates each module to dynamically update the interface display content, achieving seamless language switching and improving user fluency and satisfaction. BRIEF DESCRIPTION OF THE DRAWINGS

[0058] Attached Figure 1 It is a module connection block diagram of the first embodiment of the present invention. DETAILED DESCRIPTION

[0059] In order to make the technical solution, the technical problem solved and the technical effect of the present invention more clearly understood, the technical solution of the present invention is clearly and completely described below in conjunction with specific embodiments.

[0060] Embodiment 1:

[0061] Combined with Figure 1 This embodiment proposes a single-page application internationalization system based on Angular technology, which includes:

[0062] The browser language environment management module is integrated into the running environment of the browser. It is used to manage the acquisition and storage of language environment information when the browser loads the system, and transfer the language environment information to the internationalization service module to provide it with the basic data of the current language environment;

[0063] The internationalization service module is used to provide internationalization translation methods, provide core internationalization function support for the entire project, and manage related operation logics;

[0064] The internationalization language pack module is used to construct and store the multi-language translation content required by the system in json format;

[0065] The front-end HTML internationalization translation pipeline module is used to use the internationalization translation methods provided by the internationalization service module to realize real-time internationalization translation of text at the HTML page level, and provide users with an interface display that matches the current language environment;

[0066] The TypeScript text translation module is located in the TypeScript code of the project and is used to use the internationalization translation methods provided by the internationalization service module to realize the internationalization conversion of text at the TypeScript code level;

[0067] The Angular interceptor module is used to transfer language environment information during the interaction between the front end and the back end to ensure that the front-end and back-end data interaction can proceed smoothly in the language environment expected by the user;

[0068] The token injection configuration module is located in the providers array of the AppModule.ts file of the project and is used to provide an adapted token and related configurations for the internationalization service module;

[0069] The root component language switch response module is set in the AppComponent root component of the project and is used to monitor and respond to language switch events in the system to ensure the smoothness of interface language updates.

[0070] In this embodiment, the specific implementation process of the browser language environment management module includes:

[0071] When the browser initially loads the system, check the cookies stored in itself to determine whether there are any language environment-related records. If not found, dig deeper into the navigate attribute of the browser to extract the language setting information of the current browser, and then store this information in the cookies of the current domain name in a standard format;

[0072] When the user subsequently performs a language switching operation, the newly selected language environment value is updated to the cookie through the cookie update interface provided by the browser. So that when the browser loads the system again later, it can accurately load the web page resources corresponding to the language environment according to the language environment value stored in the cookie, and finally generate the corresponding web page information.

[0073] In this embodiment, the specific implementation process of the internationalization service module includes:

[0074] (1) Injection and initialization:

[0075] Relying on the dependency injection mechanism of Angular, inject itself into the root level;

[0076] Accept the specified Angular injection token Token. The value associated with the token Token is the internationalization translation source, which contains the internationalization language packs required for the project and is used to store the multi-language translation content in json format required by the system;

[0077] Inject the initialization logic into the constructor. The initialization logic is executed when the module is instantiated to ensure that all necessary configurations are in place accurately when the internationalization service module starts;

[0078] (2) Provide internationalization translation methods:

[0079] The internationalization translation method receives two parameters, namely the code value and an optional json format object parameter. Among them: a) According to the incoming code value, the internationalization translation method makes an accurate match in the internationalization language pack to find the corresponding translation string. b) When there is an optional json format object parameter, the internationalization translation method uses regular expressions to accurately match the key in the json object with the pre-set marker key in the translation language, and then replaces the corresponding value in the json object into the translation language to achieve the internationalization translation of the language with variables and meet the translation requirements in complex business scenarios;

[0080] (3) Language environment change notification mechanism:

[0081] The internationalization service module has a built-in Subject object. This Subject object is equipped with two functions. One function is used to trigger the next() method of the Subject object when the user switches the current language environment to send out a notification, and the other function is used to return a reference to the Observable form of this Subject, which is convenient for external modules to subscribe and listen to the dynamic changes of the language environment.

[0082] In this embodiment, the specific implementation process of the internationalization language pack module includes:

[0083] Organize the language pack data in JSON format, and assign a clear code to each translation parameter as the property name of JSON;

[0084] When the JSON property value is text, the text is the translation content corresponding to the code;

[0085] When the JSON property value is in the form of an object, it supports obtaining the property value in the nested object through the form of "a.b" for the passed-in code; where a and b represent the hierarchical structure of the object respectively.

[0086] In this embodiment, the specific implementation process of the front-end HTML internationalization translation pipeline module includes:

[0087] During the HTML page rendering process, capture the text area that needs to be translated in real time, receive the corresponding code value and optional parameters, and assemble them according to the requirements of the internationalization translation method provided by the internationalization service module;

[0088] After completing the parameter assembly, call the internationalization translation method provided by the internationalization service module, pass in the assembled parameters, and the internationalization service module searches and obtains the corresponding translated text in the internationalization language pack module according to these parameters;

[0089] Immediately present the translated text at the corresponding position on the HTML page to achieve the internationalization presentation of the HTML part.

[0090] In this embodiment, during the execution of the TypeScript code of the project, when encountering text that needs to be internationalized, the TypeScript text translation module starts to perform the following operations:

[0091] Receive the code value corresponding to the text, use this code value as the key index to locate the translation content in the internationalization service module; at the same time, when there are variables that do not need to be translated in the text, receive an optional JSON format object parameter;

[0092] Pass the received code value and the optional JSON format object parameter to the internationalization service module together; the internationalization service module performs translation processing on the text according to its internationalization translation method, and returns the internationalized text to the TypeScript text translation module after completion of translation;

[0093] The TypeScript text translation module receives the translation result returned by the internationalization service module, and ensures that in the TypeScript code, the relevant text is presented in a form that conforms to the current language environment, so as to achieve the text internationalization conversion at the TypeScript code level.

[0094] In this embodiment, the involved Angular interceptor module is injected into the root module. When the front end initiates an HTTP request, the Angular interceptor module responds quickly and immediately activates its interception function. The specific implementation process is as follows:

[0095] The Angular interceptor module first extracts the language environment information stored in the browser's cookie, and then adds the extracted information to the header of the request and sends it to the back end;

[0096] When the back-end interface receives the request, based on the language environment information carried in the header, it performs a precise search in the database that is predefined and stores multilingual data, extracts the interface data corresponding to the current language environment from the search results, and then returns this data to the front end.

[0097] In this embodiment, the involved token injection configuration module injects the tokens required by the internationalization service module with the help of a preset factory function. The factory function intelligently filters from a large number of language JSON object arrays according to the current language environment information determined by the browser language environment management module, and selects the array corresponding to the current language environment;

[0098] During the filtering process, the token injection configuration module follows the preset priority rules. The preset priority rules are:

[0099] a) Overwriting rule for non-object formats: When the value corresponding to the key in the JSON object is in a non-object format, the value corresponding to the same key that appears later will precisely overwrite the previous value;

[0100] b) Fusion rule for object formats: When the values corresponding to the keys in the JSON object are all in object formats, the token injection configuration module will fuse the properties of these two objects;

[0101] After being processed by the above priority rules, the token injection configuration module provides the fused and optimized object value to the tokens required by the internationalization service module, providing strong data support for the normal operation of the internationalization service module.

[0102] For the lazy-loaded modules existing in the project, if there is a need for personalized translation files, the token injection configuration module allows the lazy-loaded modules to refer to the mature introduction method in the AppModule, inject tokens in the provider array of their own modules, and provide a new object array for the tokens according to the specific requirements of their own business, meeting the diverse translation needs in different scenarios.

[0103] In this embodiment, the root component language switching response module works closely with the internationalization service module. The specific implementation process is as follows:

[0104] Introduce the monitoring function for the Subject object provided by the internationalization service module, add a subscription to this monitoring function, and always maintain the listening state for language environment changes;

[0105] When a language switching event is detected during the subscription process, the root component language switching response module performs the following operations: modify the language environment information in the browser cookie and attempt to refresh the entire interface; if it is evaluated that the time required to refresh the interface is too long, use the local refresh mechanism of angular to refresh the root component. At this time, the internationalization service module needs to anticipate in advance and additionally add a method to switch the language pack required for the current language environment, so that when the AppComponent is locally refreshed, this method can be manually and precisely triggered according to the directive to quickly switch the language pack required for the current language environment;

[0106] During the process of gradually loading the page area, cooperate with the front-end HTML internationalization translation pipeline module, the TypeScript text translation module, and the method of requesting the back-end interface to update the system interface display content comprehensively and dynamically, ensuring that the interface language seen by the user exactly matches the selected language environment and realizing a seamless switching experience.

[0107] Based on the single-page application internationalization system of this embodiment, its working process during specific use is as follows:

[0108] (1) Language environment information acquisition and transmission: When the browser initially loads this system, the browser language environment management module checks the cookie. If not, it extracts the language setting from the browser navigate attribute and stores it in the cookie; when the user switches the language, the cookie is updated. The browser language environment management module transmits the language environment information to the internationalization service module.

[0109] (2) Internationalization service preparation: The token injection configuration module filters according to the information determined by the browser language environment management module from the language json object array, and after processing according to the priority rules, provides an adaptation token for the internationalization service module. The internationalization service module is injected at the root level, accepts the token and the internationalization language pack, and completes the initialization configuration.

[0110] (3) Translation data preparation: The internationalization language pack module constructs and stores multi-language translation content in json format and provides a translation source for the internationalization service module.

[0111] (4) Front-end text translation: The front-end HTML internationalization translation pipeline module captures the text areas to be translated during page rendering, receives the code value and optional parameters, assembles the parameters according to the internationalization service module method and sends a parameter request for translation, receives the translated text and presents it on the HTML page; during the execution of the project's TypeScript code, the TypeScript text translation module receives the code value and optional json-format object parameters, passes them to the internationalization service module for translation request, and receives the translation result for TypeScript code presentation;

[0112] (5) Front-end and back-end interaction: The front-end initiates an HTTP request, and the Angular interceptor module extracts the language environment information from the browser cookie and adds it to the request header and sends it to the back-end; the back-end interface retrieves data from the database based on the language environment information and returns it to the front-end;

[0113] (6) Language switch response: The root component language switch response module introduces and subscribes to the monitoring function of the internationalization service module. When a language switch event is detected, it modifies the browser cookie information and attempts to refresh the interface or partially refresh the root component; during this period, it requests the internationalization service module to switch language packs, and through the front-end HTML internationalization translation pipeline module, the TypeScript text translation module, and the method of requesting the back-end interface through the Angular interceptor module, it updates the system interface display content in all aspects to achieve seamless switching of text internationalization display.

[0114] In summary, by adopting the single-page application internationalization system based on Angular technology of the present invention, the technical defects in the traditional internationalization solution can be effectively solved, and the internationalization ability of the application program and the user experience can be improved.

[0115] The above specific application examples have elaborated in detail the principle and implementation method of the present invention. These examples are only used to help understand the core technical content of the present invention. Based on the above specific embodiments of the present invention, those skilled in the art of this technology, without departing from the principle of the present invention, any improvements and modifications made to the present invention shall fall within the scope of patent protection of the present invention.

Claims

1. A single-page application internationalization system based on Angular technology, characterized in that: It includes: The browser language environment management module is integrated into the browser's operating environment and is used to manage the acquisition and storage of language environment information when the browser loads the system, and pass the language environment information to the internationalization service module to provide it with the current language environment basic data; The internationalization service module is used to provide internationalization translation methods, provide core internationalization function support for the entire project and manage related operation logic; The international language package module is used to build and store the multi-language translation content required by the system in JSON format; The front-end HTML internationalization translation pipeline module is used to use the internationalization translation method provided by the internationalization service module to achieve real-time internationalization translation of text at the HTML page level, providing users with an interface display that matches the current language environment; The TypeScript text translation module is located in the TypeScript code of the project and is used to implement internationalization conversion of text at the TypeScript code level using the internationalization translation method provided by the internationalization service module; Angular interceptor module, used to transmit language environment information during the interaction between the front-end and the back-end, to ensure that the data interaction between the front-end and the back-end can proceed smoothly in the language environment expected by the user; The token injection configuration module is located in the providers array of the project's AppModule.ts file and is used to provide adaptive tokens and related configurations for the internationalization service module. The root component language switching response module is set in the project's AppComponent root component to monitor and respond to language switching events in the system to ensure smooth interface language updates.

2. According to the single-page application internationalization system based on Angular technology in claim 1, it is characterized in that: The specific implementation process of the browser language environment management module includes: When the browser first loads the system, it checks the cookies stored in itself to determine whether there are any records related to the language environment. If not found, it digs deep into the browser's navigate attribute to extract the current browser's language setting information, and then stores the information in a cookie of the current domain name in a standardized format; When the user subsequently switches the language, the newly selected language environment value is updated to the cookie through the cookie update interface provided by the browser, so that when the browser loads the system again, it can accurately load the web page resources of the corresponding language environment based on the language environment value stored in the cookie, and finally generate the corresponding web page information.

3. According to the single-page application internationalization system based on Angular technology in claim 2, it is characterized in that: The specific implementation process of the internationalization service module includes: (1) Injection and initialization: Relying on Angular's dependency injection mechanism, inject itself into the root level; Accept the specified Angular injection token Token. The value associated with the token Token is the internationalization translation source. The internationalization translation source contains the internationalization language package required by the project and is used to store the multi-language translation content in json format required by the system. Inject initialization logic into the constructor. The initialization logic is executed when the module is instantiated to ensure that all necessary configurations of the international service module are in place when it starts. (2) Provide international translation methods: The internationalization translation method receives two parameters, namely, a code value and an optional json format object parameter, wherein: a) according to the code value passed in, the internationalization translation method performs precise matching in the internationalization language package to find the corresponding translation string; b) when there is an optional json format object parameter, the internationalization translation method uses regular expressions to accurately match the key in the json object with the pre-set tag key in the translation language, and then replaces the corresponding value in the json object with the translation language, thereby realizing the internationalization translation of the language containing variables and meeting the translation requirements in complex business scenarios; (3) Language environment change notification mechanism: The internationalization service module has a built-in Subject object, which is equipped with two functions. One function is used to trigger the next() method of the Subject object when the user switches the current language environment and send out a notification. The other function is used to return a reference to the Subject in the form of an Observable, which is convenient for external modules to subscribe to and monitor the dynamic changes in the language environment.

4. According to the single-page application internationalization system based on Angular technology as described in claim 3, it is characterized in that: The specific implementation process of the internationalized language package module includes: Use JSON format to organize language package data, and assign a clear code to each translation parameter as the attribute name of JSON; When the json attribute value is text, the text is the translation content corresponding to the code; When the json attribute value is in object form, the code passed in can be used to obtain the attribute value in the nested object in the form of "ab", where a and b represent the hierarchical structure of the object respectively.

5. According to the single-page application internationalization system based on Angular technology as described in claim 4, it is characterized in that: The specific implementation process of the front-end HTML internationalization translation pipeline module includes: During the HTML page rendering process, the text area that needs to be translated is captured in real time, the corresponding code value and optional parameters are received, and the translation is assembled according to the internationalization translation method requirements provided by the internationalization service module; After completing parameter assembly, call the internationalization translation method provided by the internationalization service module and pass the assembled parameters into it. The internationalization service module searches for and obtains the corresponding translated text in the internationalization language package module based on these parameters. The translated text is immediately presented at the corresponding position of the HTML page to achieve international presentation of the HTML part.

6. According to the single-page application internationalization system based on Angular technology in claim 5, it is characterized in that: During the execution of the TypeScript code of the project, when encountering text that needs to be internationalized, the TypeScript text translation module starts to perform the following operations: Receive the code value corresponding to the text, and use the code value as the key index to locate the translation content in the internationalization service module; at the same time, when the text contains variables that do not need to be translated, receive an optional json format object parameter; Pass the received code value and optional JSON format object parameters to the internationalization service module; The internationalization service module translates the text according to its internationalization translation method, and returns the internationalized text to the TypeScript text translation module after the translation is completed; The TypeScript text translation module receives the translation results returned by the internationalization service module to ensure that the relevant text in the TypeScript code is presented in a form that conforms to the current language environment, thereby realizing text internationalization conversion at the TypeScript code level.

7. The single-page application internationalization system based on Angular technology according to claim 6 is characterized in that: The Angular interceptor module is injected into the root module. When the front-end initiates an HTTP request, the Angular interceptor module responds quickly and immediately activates its interception function. The specific implementation process is as follows: The Angular interceptor module first extracts the locale information stored in the browser's cookie, then adds the extracted information to the request header and sends it to the backend; When the back-end interface receives a request, it performs an accurate search in a pre-defined database that stores multi-language data based on the language environment information carried in the header, extracts the interface data corresponding to the current language environment from the search results, and then returns this data to the front-end.

8. The single-page application internationalization system based on Angular technology according to claim 7 is characterized in that: The token injection configuration module injects the tokens required by the internationalization service module with the help of a pre-set factory function. The factory function intelligently screens from a plurality of language json object arrays according to the current language environment information determined by the browser language environment management module, and selects the array corresponding to the current language environment; During the screening process, the token injection configuration module follows the preset priority rules: a) Overwriting rules for non-object formats: When the value corresponding to a key in a JSON object is in non-object format, the value corresponding to the subsequent key with the same name will accurately overwrite the previous value; b) Object format fusion rule: When the values ​​corresponding to the keys in the JSON object are both in object format, the token injection configuration module will merge the properties of the two objects; After being processed by the above priority rules, the token injection configuration module provides the fused and optimized object value to the token required by the internationalization service module, providing strong data support for the normal operation of the internationalization service module.

9. The single-page application internationalization system based on Angular technology according to claim 8, characterized in that: For lazy-loading modules in the project, if there is a need for personalized translation files, the token injection configuration module allows the lazy-loading module to inject tokens into the provider array of its own module by referring to the mature introduction method in AppModule, and provide a new object array for the token according to the specific needs of its own business to meet the diverse translation needs in different scenarios.

10. The single-page application internationalization system based on Angular technology according to claim 8, characterized in that: The root component language switching response module works closely with the internationalization service module. The specific implementation process is as follows: Introduce the monitoring function for the Subject object provided by the internationalization service module, add a subscription to the monitoring function, and always keep monitoring the changes in the language environment; When a language switching event is detected during the subscription process, the root component language switching response module performs the following operations: modify the language environment information in the browser cookie and try to refresh the entire interface; if the evaluation finds that refreshing the interface takes too long, the root component is refreshed using Angular's local refresh mechanism. At this time, the internationalization service module needs to predict in advance and add an additional method for switching the language package required for the current language environment, so that when the AppComponent is partially refreshed, the method can be manually and accurately triggered according to the instructions to quickly switch the language package required for the current language environment; During the gradual loading of page areas, the system interface display content is updated comprehensively and dynamically by coordinating the front-end HTML internationalization translation pipeline module, the TypeScript text translation module, and the request back-end interface, ensuring that the interface language seen by the user fully matches the selected language environment, achieving a seamless switching experience.

Images