使用Angular 8可以在ngx中使用正则表达式翻译i18n json文件吗？

是的，使用Angular 8可以在ngx中使用正则表达式翻译i18n json文件。

Angular是一个流行的前端开发框架，它提供了强大的国际化（i18n）支持。ngx-translate是Angular的一个插件，用于实现多语言支持。它可以帮助开发人员在Angular应用程序中轻松地实现国际化和本地化。

在ngx-translate中，可以使用正则表达式来翻译i18n json文件。正则表达式是一种强大的文本匹配和处理工具，可以用于查找和替换文本中的特定模式。

使用正则表达式翻译i18n json文件的优势在于可以更灵活地处理文本。通过定义适当的正则表达式模式，可以实现更复杂的翻译逻辑，例如根据特定的文本模式选择不同的翻译结果。

使用Angular 8和ngx-translate，您可以在应用程序中使用正则表达式翻译i18n json文件，以实现多语言支持。您可以通过以下步骤来实现：

安装ngx-translate：在Angular项目中，使用npm安装ngx-translate依赖项。
安装ngx-translate：在Angular项目中，使用npm安装ngx-translate依赖项。
导入ngx-translate模块：在您的Angular模块中，导入ngx-translate模块并将其添加到imports数组中。
导入ngx-translate模块：在您的Angular模块中，导入ngx-translate模块并将其添加到imports数组中。
创建翻译文件：创建一个或多个i18n json文件，用于存储不同语言的翻译文本。您可以根据需要创建不同的文件，例如en.json、zh.json等。
创建翻译文件：创建一个或多个i18n json文件，用于存储不同语言的翻译文本。您可以根据需要创建不同的文件，例如en.json、zh.json等。
在组件中使用ngx-translate：在您的组件中，使用ngx-translate的TranslateService来加载和翻译文本。
在组件中使用ngx-translate：在您的组件中，使用ngx-translate的TranslateService来加载和翻译文本。
在模板中使用翻译文本：在您的模板中，使用ngx-translate的TranslatePipe来显示翻译文本。
在模板中使用翻译文本：在您的模板中，使用ngx-translate的TranslatePipe来显示翻译文本。

以上是使用Angular 8和ngx-translate在ngx中使用正则表达式翻译i18n json文件的基本步骤。您可以根据具体需求和正则表达式的规则来定义和处理翻译文本。

推荐的腾讯云相关产品：腾讯云国际化（i18n）服务。该服务提供了全球化的多语言支持，可帮助开发人员轻松实现应用程序的国际化和本地化。您可以通过以下链接了解更多信息：腾讯云国际化服务。

相关·内容

Angular 项目多国语言设置

React 和 Vue 项目同理～这里我们仅考虑简体中文和美国英文两种语言，使用的框架版本为 @angular/core: "~12.1.0" 在日常开发中，我们难免会引入第三方 UI 框架，那么这就涉及了第三方...这个有点麻烦，但是我们依然可以使用依赖库，比如 ngx-translate 实现，喜大奔普～安装依赖 npm install @ngx-translate/core --save npm install...添加多国语言包我们在 assets 文件夹下面新建 i18n/*.json。这里我们新建了 zh-CN.json 和 en-US.json 两个文件。...", "download": "Download", "file": "File", } app.component.ts 中初始化语言我们在 app.component.ts 中对翻译服务初始化...} } 我们先判断是否存在本地存储的语言信息，如果不存在则获取浏览器设定的当前语言；当 assets/i18n/ 文件夹下面没有我们要找的语言包的时候，则使用默认 en-US.json 语言包，

1.9K2 0

Angular 工具篇之国际化处理

在日常开发过程中，某些项目会要求支持国际化。...对于使用 Angular 框架的项目来说，我们可以利用以下第三方库，快速支持国际化： ngx-translate/core ngx-translate/http-loader ngx-translate-extract...在定义完 extract 脚本之后，我们可以运行下面的命令执行自动抽取任务： $ npm run extract 命令成功执行后，在 src/assets 目录下会生成 3 个 JSON 文件： └──...i18n ├── en.json ├── zh-cn.json └── zh-hk.json 接下来我们来分别更新一下 3 个文件： zh-cn.json {"home": ".../core、@ngx-translate/http-loader 及 @biesbjerg/ngx-translate-extract 这三个库的使用，在实际的开发中还会遇到很多其他的问题，这时就需要大家认真阅读上述库相关的说明文档

2K2 0

Ng-Matero V10 正式发布！

Angular v10 在六月下旬就悄无声息的发布了，虽然 v9 的发布延期了两个月，但是 v10 并没有受影响，仍然如期而至。...通过 ng new 生成的项目目录稍有不同，不过不用担心，使用 ng update 直接升级即可，CLI 会自动帮你替换这些文件，没有任何阻碍。...Ng-Matero Ng-Matero 在 9.2.0 的时候已经增加了 i18n 相关的代码及示例，但是并不完善。...在 9.6.0 的时候重点增加了 formly 的校验提示的 i18n，而且关于 formly 的全局配置模块也移到了 app 根目录。...在线示例：https://ng-matero.github.io/extensions/select Ng-Matero 首先对 theme 模块下面的样式进行了重构，组件样式都移到了独立的文件夹中，另外将主题样式分离出来

1.4K1 0

Angular2 拦截器（页面请求修改Url+headers传值+获取服务器返回的错误信息）

使用该位置不支持的请求方法进行了请求。", "status.406": "不可接受。服务器只生成客户端不接受的响应。"...采用下面这段代码可以注释掉下面的get，post等方法 //因为调用的request方法的时候http底层传递过来的是一个request对象。...'@angular/http'; import { TranslateService, TranslateModule, TranslateLoader } from '@ngx-translate/core...'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { Router } from "@angular.../assets/i18n/', '.json'); } //在httpinterceptorserveice 里面用那些服务需要注入进来这块是主要的 export function interceptorFactory

2.9K2 0

Angular10配置webpack打包「详细教程」

新生成的应用包含一个根模块的源文件，包括一个根组件及其模板。当工作空间文件结构到位时，可以在命令行中使用 ng generate 命令往该应用中添加功能和数据。...除了在命令行中使用 CLI 之外，你还可以使用像 Angular Console 这样的交互式开发环境，或直接在应用的源文件夹和配置文件中操作这些文件。...但是6版本中可能会出现安装不成功，这时候请直接yarn add ngx-build-plus --dev，然后angular.json文件中更改以下两处地方: "build": { - "builder...// 在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。 ....* 中设置的值。 test：该属性值的数据类型可以为字符串或 正则表达式，它规定了哪些文件目录的模块可以被分离生成新文件。 priority：该属性值的数据类型可以为数字，默认值为 0。

4.8K2 0

前端国际化辅助工具——自动替换中文并翻译

自动翻译功能使用的是百度免费翻译 API，每秒只能调用一次，并且需要你注册百度翻译平台的账号。...// i18n 输出文件 indent: 4, // i18n 输出文件缩进 entry: 'src', // 要翻译的入口目录或文件，默认为命令行当前的 src 目录 prefix...= '一' 启用工具后，源码文件中的 const test = '一' 将会被替换为 const test = this....extra 由于 i18n-replace 默认只支持 .vue 和 .js 文件。所以提供了一个 extra 选项，以支持其他的文件格式，它的值为正则表达式。...extra: /(\.a)|(\.b)$/ 例如使用上述的正则表达式，i18n-replace 将额外支持 .a .b 文件我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com

3.7K3 0

如何在 Windows 上安装 Angular：Angular CLI、Node.js 和构建工具指南

注意：您可以免费下载我们的《Angular 8 书：使用 Angular 8 构建您的第一个 Web 应用程序》。...有很多方法可以做到这一点，例如：使用 NVM（Node版本管理器）在系统中安装和使用多个版本的node 使用对应的操作系统的官方包管理器从官方网站安装它。让我们保持简单并使用官方网站。...生成项目您可以使用 Angular CLI 通过在命令行界面中运行以下命令来快速生成 Angular 项目： $ ng new frontend 注意：frontend是项目的名称。...：TypeScript 的配置文件 tslint.json：TSlint（静态分析工具）的配置文件为您的项目服务 Angular CLI 提供了一个完整的工具链，用于在本地计算机上开发前端应用程序。...Angular CLI 将自动在 src/app.module.ts 文件中添加对组件、指令和管道的引用。

1730 0

AngularJS 国际化——Angular-translate

通常i18n是国际化的意思，就是在不改变源码的情况下，通过某些简单的配置就能适应不同的语言环境。 l10n，则是本地化的意思，是针对某一些语言进行定制化。...最下面是几种异步加载器，可以异步加载国际化数据，提升应用的性能。最左边提供了几种持久化方案，如果应用需要记住用户的选择或者默认设定语言环境，则可以使用这种这种服务，需要额外安装需要的包。...如果直接使用标签，那么很简单，只要保证angular在angular-translate之前引入即可： <script src="http://apps.bdimg.com...app = <em>angular</em>.module("MyApp",['pascalprecht.translate']); 这样angular后续加载的模块都会注入一个translate服务，而不需要每个文件都声明...当然，一般国际化都不会直接写在上面的函数中，可以通过angular声明一个模块或者通过require引入一个自执行的方法，方法返回国际化的JSON对象，这样直接引入： $translateProvider.translations

1.6K8 0

ionic3使用带图标带事件的toast

image.png ionic3集成使用ngx-toastr 根据Github上的文档说明，进行如下步骤：安装组件 npm install ngx-toastr --save npm install...@angular/animations --save 添加样式 Github文档是通过修改angular-cli.json文件来导入样式的，而对于ionic来说，该类似文件封装在源码里面，不应该修改，.../platform-browser/animations‘此方式; 使用上面步骤处理好后，就可以很方便使用了： import { ToastrService } from 'ngx-toastr';...; } } 防止污染ionic自带的toast样式 ngx-toastr的样式刚好和ionic都用到了.toast-container的class，所以会影响，此时，把toastr.min.css中的...ngx-toastr把toasts放进自定义容器默认toasts全局显示，如果想限定在某个div或容器里面，使得该容器不可见时不让toast干扰到其它标签，就可以利用ToastContainerModule

2.9K2 0

关于做angular4引入echarts图表

在项目包配置文件中引入js脚本 //angular-cli.json文件 { "apps": [{ "scripts":[ ".....当您的数据未准备好时，使用它来切换加载动画的echarts。 theme：用它来初始化具有主题的echarts。你需要在主题文件.angular-cli.json或index.html。...[merge] object null 您可以使用它来更新部分内容options，尤其是在需要更新图表数据时。...[theme] string null 使用它来初始化主题echarts。您需要将主题文件包含在angular-cli.json其他模块解析器中。...您可以直接获取本机echarts对象或使用包装器方法。

3.1K4 0

使用dropwizard(6)-国际化-easy-i18n

，想要读取翻译，可能翻译文件在不同的Resource Bundle，但我指向用一个接口去调用。...#情形4 没有了，你翻译要那么复杂吗。...具体做法是，在文件夹i18n右键 -> new -> Resource Bundle, 然后选择想要支持的语言。比如美国en_US，简体中文zh_CN。...return messageSource; } } 这里，关于Resource Bundle的位置没有单独提出来，后面可以放到HelloWorldConfiguration，提到配置文件中...测试在dagger中，接口和实现类的绑定只能通过手动声明。

1.1K12 0

angular4实战（3）插件引入及封装

再引入使用js脚本之前，需要事先引入对应的类型声明文件（xx.d.ts），类似于c中的.h头文件。...当插件本身已经存在了声明文件时，就可以在项目中去使用它了，但是直接引入，typescript还是不认得。如: ? 此时两种解决方案。...方案一：将import Noty from 'noty'改为import * as Noty from 'noty'; 方案二：在tsconfig.json中的compilerOptions下添加配置...组件中服务的引用依赖于providers，先向providers做注入，才可以在组件类中去使用。而服务本身的封装，也需要去Injectable，才可以向providers中提供。 ?...，例如提醒服务，国际化服务（本项目使用了ngx-translate做国际化，ngx-translate在网上的教程比较详尽，不做赘述）。

7523 0

初识ABP vNext（3）：vue对接ABP基本思路

因为目前ABP的官方模板只支持MVC和Angular，MVC的话咱.NET开发人员来写还可以，专业前端估计很少会用这个。。。Angular我本人不熟，所以选择vue来做UI。...在开始编码前，需要先分析几个重要问题：用户登录/token 用户权限控制应用程序本地化/语言切换好在ABP模板提供了Angular版本，我们可以参考Angular版本来做。...在auth.policies字段中包含了系统的所有权限，auth.grantedPolicies字段则包含了当前用户所拥有的权限，因为我现在没登录所以是空的。...ABP还支持为每个模块单独配置数据库（如果你不需要分库，可以忽略以下内容），修改DbMigrator、IdentityServer项目的appsettings.json配置文件： ?...在ConnectionStrings中添加AbpIdentityServer配置，为Identity Server配置独立的数据库连接字符串，不配置的话默认使用Default配置。

2.6K5 0

.net core + angular 项目中使用ueditor遇到的问题

前言这是两个问题， 1、angular中使用ueditor 2、.net core 中使用ueditor .net core 中使用ueditor 在.net core中使用ueditor 主要是解决...使用UEditor.Core 或者UEditorNetCore都可以解决此问题。但是使用过程中可能会出现以下问题。...2、修改startup.cs 在ConfigureServices方法中添加如下内容　　//第一个参数为配置文件路径，默认为项目目录下config.json 　　//第二个参数为是否缓存配置文件，默认...image.png 各个版本的这个文件应该可以通用。 ? image.png 配置文件中的说明已经很清楚了。...中使用ueditor 使用ngx-ueditor 基本可以解决问题。

1.3K2 0

前端国际化：语言包篇

当然还有其他手段可以实现，但在本篇文章中我们统一约定使用 .tr 作为语言包文件。...另外一个好处是可以根据模块按需加载。 1.3 如果是分模块的话？粒度怎么把握? 为了平衡加载速度、可维护性，翻译文件不能过小、也不能过大。通常按照业务模块的粒度来划分。...$/).use('json').loader('json-loader').end() 使用 json-loader 来处理 tr 文件。...如果无法你发现 i18n ally 插件没有启用，那大概率就是它检测失败了, 可以在 OUTPUT Panel 下看的日志：解决办法就是显式告诉它： // .vscode/setting.json...", "**/i18n"] } 语言包配置我们上文使用的是 .tr 扩展名， i18n ally 并不能识别它，我们通过下面的配置来告诉它如何处理 tr 文件： // .vscode/setting.json

1.1K3 0

Angular 5.0.0发布！

构建优化器 5.0.0开始，通过CLI执行的产品构建默认使用构建优化器。构建优化器是CLI中的一个工具，它基于我们对你Angular应用的理解，可以把构建后的包变得更小。构建优化器有两个主要任务。...Angular Universal团队还把平台服务器Domino加到了平台服务器中。Domino支持在服务器端环境下更多的开箱即用的DOM操作，可以改进我们对非服务端第三方JS及组件库的支持。...在以前版本的Angular中，我们一直依赖浏览器及其i18n API提供数值、日期和货币格式。为此，很多开发者都在使用腻子脚本（polyfill），而结果也不好。...exportAs 组件和指令中增加了对多名称的支持。这有助于用户实现无痛迁移。通过把指令导出为多个名称，可以在不破坏原有代码的情况下在Angular语法中使用新名称。...在这次小版本升级中，我们默认打开了构建优化器，让开发者拿到更小的包。我们还修改了使用 .tsconfig文件的方式，以更严格地遵守TypeScript标准。

4.4K4 0

Spring MVC 你必须关注点

再使用@Validated 指定校验的分组，则可以实现不同类型的操作，校验不同的内容。国际化在校验环节，我们直接把message放到了代码中。除了调整不方便，每次都需要重新编译和发布版本。...它会根据Http Header中的Locale 来决定取哪个文件的配置来解析消息。...比如locale 是zh_CN那么会取classpath下的i18n/message_zh_CN.properties来查找消息的对应翻译，如果查找不到则使用i18n/message.properties.../message_zh_CN.propertiesNotBlank.user.username=用户名不能为空Range.user.age=年龄必须在{min}岁到{max}岁之间在定义i18n文件的时候可以使用变量...分别对他们的以及内容进行i18n信息的翻译。

7002 0

angular使用ngx-vant组件库

安装首先去官网找到安装命令 yarn add ngx-vant or npm i ngx-vant 使用单独创建一个ts文件，把ngx-vant的标签放到里面，这样就可以全局导入了 import...{ NgModule } from '@angular/core'; import { ButtonModule } from 'ngx-vant/button'; import { CellModule...NavBarModule, TabsModule, TabModule ] }) export class VantModule { } 挂载在app.module.ts...中挂在刚才创建的ts文件 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular.../core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from '.

1261 0

多语言站点react前端框架i18next

在 react 中，其实已经有人封装了多语言的扩展库，我们只需要安装它就可以在我们的 react 项目中实现网站的多语言切换。下面我们简单介绍下如何使用它。...React" } }, } }); export default i18n; 在这里面，resources 属性里面配置的就是对应的各个语言的翻译，这里面的数据...，一般我们都是从数据库中获取，这里为了演示，我们直接写在了配置文件中。...npm install i18next-browser-languagedetector --save 使用方式如下： import i18n from "i18next"; import detector...总之，i18next 是非常不错的多语言站点插件，更多的使用方法和介绍你可以参考官网。

2.6K2 0

ionic3升级适配angular5

我们可以先看下angular5的更新说明： ---- 更改内容： I18n更改；内置管道如Date、Currency、Percent的更改；弃用内容： compiler: ngGetContentSelectors...代替，但不影响在模版中使用*ngFor； common: NgTemplateOutlet#ngOutletContext在v4版本被弃用，使用NgTemplateOutlet#ngTemplateOutletContext...core: TrackByFn在v4版本被弃用并移除，现用TrackByFunction代替； http: 弃用 @angular/http，转为使用@angular/common/http； router...在本项目中，因为没有用到那几个内置管道，也没有用到路由，所以主要是调整Http模块：在4.x中HttpClient模块被封装在@angular/common中，新的HttpClient被封装在@angular.../common/http中，更新Http模块后，需要使用HttpClientModule替换原有HttpModule，并在使用http服务时，可以去掉map(res=>res.json())的调用，因为新模块中已经不再需要了

2.5K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云