首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从Angular 6中的组件中提取文本进行翻译(ngx-translate)

在Angular 6中,可以使用ngx-translate库来实现从组件中提取文本进行翻译。ngx-translate是一个流行的Angular国际化(i18n)库,它提供了一种简单而灵活的方式来实现多语言支持。

以下是从Angular 6中的组件中提取文本进行翻译的步骤:

  1. 首先,确保已经安装了ngx-translate库。可以通过以下命令来安装:
代码语言:txt
复制

npm install @ngx-translate/core --save

代码语言:txt
复制
  1. 在Angular应用的根模块中导入ngx-translate库,并配置翻译器:
代码语言:typescript
复制

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { HttpClient, HttpClientModule } from '@angular/common/http';

// 创建一个自定义的翻译加载器

export function HttpLoaderFactory(http: HttpClient) {

代码语言:txt
复制
 return new TranslateHttpLoader(http);

}

@NgModule({

代码语言:txt
复制
 imports: [
代码语言:txt
复制
   BrowserModule,
代码语言:txt
复制
   HttpClientModule,
代码语言:txt
复制
   TranslateModule.forRoot({
代码语言:txt
复制
     loader: {
代码语言:txt
复制
       provide: TranslateLoader,
代码语言:txt
复制
       useFactory: HttpLoaderFactory,
代码语言:txt
复制
       deps: [HttpClient]
代码语言:txt
复制
     }
代码语言:txt
复制
   })
代码语言:txt
复制
 ],
代码语言:txt
复制
 declarations: [AppComponent],
代码语言:txt
复制
 bootstrap: [AppComponent]

})

export class AppModule { }

代码语言:txt
复制

在上述代码中,我们使用TranslateHttpLoader来加载翻译文件,并将其配置为应用的根模块。

  1. 创建翻译文件:

在应用的根目录下创建一个名为assets/i18n的文件夹,并在该文件夹下创建一个名为en.json的文件(用于英文翻译),以及其他需要的语言文件(如fr.json用于法语翻译)。

en.json文件内容示例:

代码语言:json
复制

{

代码语言:txt
复制
 "HELLO": "Hello",
代码语言:txt
复制
 "WELCOME": "Welcome to my app"

}

代码语言:txt
复制

fr.json文件内容示例:

代码语言:json
复制

{

代码语言:txt
复制
 "HELLO": "Bonjour",
代码语言:txt
复制
 "WELCOME": "Bienvenue dans mon application"

}

代码语言:txt
复制

在这些文件中,我们定义了一些需要翻译的文本,使用键值对的形式。

  1. 在组件中使用ngx-translate进行翻译:
代码语言:typescript
复制

import { Component } from '@angular/core';

import { TranslateService } from '@ngx-translate/core';

@Component({

代码语言:txt
复制
 selector: 'app',
代码语言:txt
复制
 template: `
代码语言:txt
复制
   <h1>{{ 'HELLO' | translate }}</h1>
代码语言:txt
复制
   <p>{{ 'WELCOME' | translate }}</p>
代码语言:txt
复制
 `

})

export class AppComponent {

代码语言:txt
复制
 constructor(private translate: TranslateService) {
代码语言:txt
复制
   // 设置默认语言
代码语言:txt
复制
   translate.setDefaultLang('en');
代码语言:txt
复制
 }

}

代码语言:txt
复制

在上述代码中,我们使用translate管道来翻译文本。通过TranslateService,我们可以设置默认语言和切换语言。

  1. 在应用中切换语言:
代码语言:typescript
复制

import { Component } from '@angular/core';

import { TranslateService } from '@ngx-translate/core';

@Component({

代码语言:txt
复制
 selector: 'app',
代码语言:txt
复制
 template: `
代码语言:txt
复制
   <button (click)="switchLanguage('en')">English</button>
代码语言:txt
复制
   <button (click)="switchLanguage('fr')">French</button>
代码语言:txt
复制
   <h1>{{ 'HELLO' | translate }}</h1>
代码语言:txt
复制
   <p>{{ 'WELCOME' | translate }}</p>
代码语言:txt
复制
 `

})

export class AppComponent {

代码语言:txt
复制
 constructor(private translate: TranslateService) {
代码语言:txt
复制
   translate.setDefaultLang('en');
代码语言:txt
复制
 }
代码语言:txt
复制
 switchLanguage(language: string) {
代码语言:txt
复制
   this.translate.use(language);
代码语言:txt
复制
 }

}

代码语言:txt
复制

在上述代码中,我们通过点击按钮来切换语言。switchLanguage方法使用TranslateServiceuse方法来切换语言。

以上就是从Angular 6中的组件中提取文本进行翻译的步骤。通过使用ngx-translate库,我们可以轻松实现多语言支持,并根据需要切换不同的语言。

腾讯云相关产品和产品介绍链接地址:

请注意,以上链接仅供参考,具体产品和服务详情请访问腾讯云官方网站获取最新信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 项目多国语言设置

React 和 Vue 项目同理~ 这里我们仅考虑简体中文和美国英文两种语言,使用框架版本为 @angular/core: "~12.1.0" 在日常开发,我们难免会引入第三方 UI 框架,那么这就涉及了第三方...下面我们进入主题~ 如何判断语言 怎么知道我们所处语言环境呢? 这里我们采用两种方式: 采用 localstorage ,对页面中用户切换语言存储。优先级高 读取浏览器设置语言。...NG-ZORRO Empty 组件提示成功更改为英文: 设置自定义多国语言 那么,对于我们自定义页面内容,怎么翻译呢?...这里路径也方便我们在部署过程 url 调整,比如添加个前缀 /jimmy/ 。详见 Angular 项目路径添加指定访问前缀。...我们在 app.component.ts 翻译服务初始化: import { Component, OnInit } from '@angular/core'; import { TranslateService

1.9K20

Angular 工具篇之国际化处理

对于使用 Angular 框架项目来说,我们可以利用以下第三方库,快速支持国际化: ngx-translate/core ngx-translate/http-loader ngx-translate-extract...: –input:抽取字符串目录; –output:抽取结果输出目录; –sort:保存输出文件时, 按照字母顺序对键进行排序; –format:指定输出文件格式,支持 json、namespaced-json...TranslatePipe 字段之外,也可以抽取项目中应用TranslateDirective 和 TranslateService 进行国际化处理字段。...接着我们需要分别更新 zh-cn.json、zh-hk.json 和 en.json 文件: { "hello": "hello {{value}}", "home": "首页" } 最后我们在介绍如何在懒加载模块启用国际化.../core、@ngx-translate/http-loader 及 @biesbjerg/ngx-translate-extract 这三个库使用,在实际开发还会遇到很多其他问题,这时就需要大家认真阅读上述库相关说明文档

2K20

Ng-Matero V10 正式发布!

Angular v10 发布不久,立即就有人提 issue 要求 Ng-Matero 也升级到 v10,由于受限于第三方组件库及其它细节考虑,迟迟没有更新。...其实 v10 版本除了将 AngularAngular Material 升级之外,主要是调整了 schematics ng add 兼容问题,其它代码和 v9 最新版是一样。...最终参考了 ngx-formly 设计方案,每个文本都支持传入响应式数据流,以 ngx-translate 为例,通过 translate.stream 监听语言变化即可。...Material Extensions 扩展组件大部分组件都做了主题样式分离, 9.11.0 之后必须要定义主题样式。熟悉 Material 组件朋友应该都不陌生。...在线示例:https://ng-matero.github.io/extensions/select Ng-Matero 首先对 theme 模块下面的样式进行了重构,组件样式都移到了独立文件夹,另外将主题样式分离出来

1.4K10

号外号外!DevUI Admin V1.0 发布啦!

[1.png] 4月是鸟儿月份,是木棉花月份,是 DevUI Admin 发布月份。 广受大家期待 DevUI Admin 终于迎来了第一个开源 Angular 版本!...DevUI Admin 是一个企业级后台前端/设计解决方案,依据 DevUI Design 设计价值观,我们在自身设计规范和基础组件基础上,构建出了后台管理模板 DevUI Admin。...更多地,我们也提供了 da-grid 作为公共组件,你可使用该组件进行响应式页面搭建。...更多地,我们提供了 da-layout 作为组件,你也可使用该组件扩展更多布局配置。...Cli 支持 当前 DevUI Admin 支持使用 angular cli 初始化一个 admin 项目,使用 angular cli 即可快速创建并配置你 admin 项目。

56630

Angular Material 设计之美

不会让开发人员感到困惑简单 API。 在各种各样没有 bug 用例按预期行事。 通过单元测试和集成测试更好地测试行为。 可在 Material Design 规范范围内进行定制。...接下来我会相对宏观角度介绍 Angular Material 设计一些亮点,并且简单介绍 Angular Material 一些使用技巧。...少即是多 Less is more(少即是多)—— 密斯·凡德罗 我想很多人对 Angular Material 望而却步原因之一就是它组件看上去有点少。然而在一般业务这些组件已经够用。...我在以前写 helper 库 时候,曾写过颜色集群,文本色处理都是一刀切,非常不严谨,所以感触非常深。更惊喜Angular Material 甚至给出了灰色值别名。...在此推荐一些优秀第三方组件。 ng-select ngx-formly ngx-progressbar ngx-translate ngx-toastr photoviewer

5K30

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

如何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南 本文翻译自How to Install Angular on Windows: A Guide to...Angular CLI, Node.js, and Build Tools,作者为Ahmed Bouchefra 在本教程,我们将学习如何在 Windows 安装 Angular CLI 并使用它来创建...build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 输出目录。必须工作空间目录执行。 config: 检索或设置 Angular 配置值。...请参阅https://update.angular.io/ version (v): 输出 Angular CLI 版本。 xi18n: 源代码中提取 i18n 消息。...结论 在本教程,我们了解了如何在 Windows 计算机上安装 Angular CLI,并使用它从头开始初始化一个新 Angular 项目。

9500

一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

让我们将我们的卡片文本属性添加到卡片组件模板: [...] {{ card.text }} [...] 现在看看它是如何工作: ?...之后,我们可以调用我们addCard方法,在该方法,我们onCardAdd我们的卡片中输出Angular 文本,并将卡片文本重置为空字符串,以便用户可以继续添加新卡片而无需编辑旧卡片文本。...this.text = text; } } 因此,我们正在使用类来构建数据,除了我们文本外,我们还key$Firebase添加。...如果我们About在应用程序需要一个页面会怎么样 我们如何将它添加到我们当前代码库?显然,该页面应该是一个组件(与Angular其他内容一样)。我们来生成这个组件。...国际化 构建我们应用程序另一个原因是Angular如何处理国际化,或者以简单语言来讲,国际化。Angular不会在运行时处理它,而是在编译时进行处理。让我们为我们应用程序进行配置。

42.5K10

打磨 IT 技能、实践全栈开发:Demo 项目之母 RealWorld | 开源日报 No.117

它展示了如何使用不同前端和后端来构建相同功能应用,并且所有实现都遵循相同 API 规范。...可自定义选择:您可以任意组合喜欢或熟悉前端 (React,Angular 等) 与后台 (Node,Django 等),并观察它们如何共同打造出名为 Conduit 精美设计全栈应用程序。...响应式设计:通过使用关键字参数进行样式设置,以及嵌套不同组件来创建复杂布局,在 Reflex 实现响应式设计非常简单直观。...其主要目标是将构建可靠、可观察软件最佳实践引入生成式人工智能,并提供了一些核心组件和高级抽象层,包括 AI 模型 (用于结构化文本)、AI 分类器 (无需代码和训练数据即可创建多标签分类器)、AI...Marvin 非常适合以下方面: 可伸缩 API、数据管道和代理 借助强大快速分类器进行开发 非结构化文本提取结构化且类型安全数据 为应用程序生成合成数据 在应用程序解决规模上复杂推断任务 同时还可以定制

16210

AngularDart4.0 指南- 模板语法二 顶

如何输入框中提取当前显示文本,以便更新数据属性? 谁想每一次都看看? 该ngModel指令隐藏了自己ngModel输入属性和ngModelChange输出属性背后这些繁重细节。...当指令没有合适宿主元素时如何对元素进行分组。 如何编写自己结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见结构指令: NgIf:有条件地DOM添加或删除元素。...Angular把这条指令翻译成一个围绕宿主元素,然后重复使用这个模板为列表每个英雄创建一组新元素和绑定。 在“结构指令”指南中了解微语法。...它可以根据切换条件几个可能元素显示一个元素。 Angular只把选中元素放入DOM。...例如,您可以将数字显示为货币,强制文本为大写,或筛选列表并对其进行排序。 对于这些小型转换来说,Angular 管道是一个很好选择。 管道是简单函数,它接受一个输入值并返回一个转换后值。

29.9K20

AngularDart4.0 指南- 用户输入 顶

用户操作,如点击链接,按下按钮,输入文字引发DOM事件。 本页说明如何使用Angular事件绑定语法将这些事件绑定到组件事件处理程序。 运行实例(查看源代码)。... 等号左边(click)标识按钮点击事件作为绑定目标。 等号右边引号文本是模板语句,它通过调用组件onClickMe()方法来响应click事件。...; } 当用户点击按钮时,AngularClickMeComponent调用onClickMe()方法。 通过事件对象获取用户输入 DOM事件携带可能对组件有用信息有效载荷。...传递$event 是一个待考虑做法 键入事件对象揭示了将整个DOM事件传递到方法一个重要问题:组件与模板细节密切相关。 如果不使用Web API,组件将无法提取数据。...代码使用box变量来获取输入元素值,并在标签之间进行插值显示。 模板是完全独立。 它不绑定到组件组件什么也不做。 在输入框输入内容,然后观看每个按键显示更新。 ?

3.4K00

AngularDart4.0 指南- 模板语法一 顶

学习如何编写显示数据并在数据绑定帮助下使用用户事件模板。 Angular应用程序管理用户看到和可以做事情,通过组件类实例(组件)和面向用户模板交互来实现这一点。...在下面的章节,您将学习如何通过数据绑定来动态获取和设置DOM(文档对象模型)值。 数据绑定插值第一种形式开始,看看有多少更丰富模板HTML可以使用。请回到顶部。 插值({{...}})...更多,大括号之间文本是一个模板表达式,Angular首先评估并转换为一个字符串, 通过添加这两个数字来进行以下内插: <!...它是一个事件全部。 就是如何用户操作更新应用程序状态。 响应事件是Angular“单向数据流”另一面。在事件循环这个周期中,您可以自由地在任何地方进行所有更改。...然后,您将学习如何使用封装了HTML组件创建新元素,并将它们放入模板,就好像它们是原生HTML元素一样。 <!

5.1K10

Angular2 之 单元测试

组件测试 单独service测试 Angular测试工具 Angular测试工具类包含了TestBed类和一些辅助函数方法,当时这不是唯一,你可以不依赖Angular DI(依赖注入)系统,...TestBed类和@angular/core/testing一些方法。...Angular注入系统是层次化。 可以有很多层注入器,根TestBed创建注入器下来贯穿整个组件树。 最安全并总是有效获取注入服务方法,是被测试组件注入器获取。...被注入组件userService实例是彻底不一样对象,是提供userServiceStub 克隆。 TestBed.get方法根注入器获取服务。...getQuote 辅助方法提取出显示元素文本,然后expect语句确认这个文本与预备名言相符。 fakeAsync fakeAsync是另一种Angular测试工具。

5.5K20

2021 年 Angular vs. React vs. Vue 前端框架对比

Angular 框架,每个组件都有一个类或模板,定义了应用逻辑和 MetaData(装饰器)。组件这些元数据为创建和呈现其视图所需构件在哪里提供了指引。...服务 —— Angular 应用一个独特元素,被 Components 用于委托业务逻辑任务,如获取数据或验证输入。...Vue 模板语法将可识别的 HTML 与特殊指令和功能相结合。该语法允许开发人员创建 View 组件。 现在 Vue 组件是小巧、自成一体和可复用。...经过验证兼容性和灵活性。 不管应用程序规模如何,代码库都不会变。...如果发现译文存在错误或其他需要改进地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头 本文永久链接 即为本文在 GitHub 上 MarkDown 链接。

2.1K10

给Java程序员Angular快速指南 | 洞见

工作目标是贯穿前后端价值流,对单个故事进行端到端交付。 但是,要如何克服实现遇到技术难题以及保障代码质量呢?那就要靠团队技术专家了。 ?...在 Angular ,路由还同时提供了惰性加载等特性,因此,早期对路由进行合理规划非常重要。不过也不用过于担心,Angular 重新划分路由代价并不高。...服务与依赖注入 Angular 服务与依赖注入和 Spring 很像,主要区别是 Angular 是个树状多级注入体系,注入器树是和组件树一一对应,当组件要查找特定服务时,会组件逐级向上查找...也让你可以先用文本框快速搭出一个表单,将来再逐个把这些文本框替换成自定义编辑框,而不会破坏客户代码。...中文文档和英文文档至少在每个大版本都会进行一次同步翻译。虽然时间有限导致语言上还有粗糙之处,不过你可以相信它技术准确度是没问题

2.3K41

AngularDart 4.0 高级-管道 顶

从技术上讲,这是可选; 无论角度如何Angular都会查找并执行transform方法。 现在您需要一个组件来演示管道。...注意如何添加一个英雄: heroes.add(hero); 您将英雄添加到英雄列表。 对列表引用没有改变。 这是同一个列表。 这都是Angular关心。...]; } 异步管道将样板文件保存在组件代码。 该组件不必订阅异步数据源,提取已解析值并将其公开以进行绑定,并且必须在其销毁时取消订阅(内存泄漏有效来源)。...JsonPipe 在前面的代码示例,第二个提取管道绑定显示了更多管道链接。 它通过链接到内置JsonPipe以JSON格式显示相同英雄数据。...Angular团队和许多经验丰富Angular开发人员强烈建议将过滤和排序逻辑移植到组件本身

6.3K20

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

一、ngx-build-plus 建立额外配置 这里推荐一个工具库ngx-build-plus,不需要改很多东西就能在现有项目进行集成。接下来教大家如何使用,具体详情可以去github上找文档。...使用CLI创建一个新Angular项目 零搭建Angular10项目 先决条件 在开始之前,请确保你开发环境已经包含了 Node.js® 和 npm 包管理器。...第四步:编辑你第一个 Angular 组件 组件Angular 应用基本构造块。 它们在屏幕上显示数据、监听用户输入,并根据这些输入采取行动。...把 title 属性 'my-app' 修改成 'My First Angular App'。...仅允许您添加一些块(例如,仅单元测试块) chunksSortMode {String、Function} auto 允许控制在将块包含到HTML之前应如何对其进行排序。

4.8K20

如何开发跨框架组件

这时框架数据和 DOM 之间关系会变得混乱。实际上,组件删除 DOM 可能会导致以下错误: ? ReactDOM错误 因为框架正在寻找已被删除 DOM。...egjs 【https://naver.github.io/egjs】已经开始考虑使用跨框架组件来解决上述两种方法存在问题。 以下是跨框架组件如何解决问题以及如何将其应用于原生组件方法。...你可以用与框架相同方式同步它。但是我不知道如何与 React、Angular 或 Vue 同步,并且 React、Angular 和 Vue 使用所有方法都不一样。...source=post_page---------------------------】 这能够允许你 DOM 同步到 组件,而不必知道如何在框架中使用它。 ?...许多人在使用 egjs,而且正在用到许多框架,如React、Angular 和 Vue。以前它需要花费两倍时间来进行处理,因为它是用两组代码进行管理

2.6K30
领券