ngx翻译在构造函数或ngOnit中不起作用
ngx-translate 是一个用于 Angular 应用程序的国际化库，用于实现多语言翻译。它可以让你轻松地将应用程序的界面文本翻译成不同的语言，以适应不同语言用户的需求。
对于 ngx-translate 在构造函数或 ngOnInit 中不起作用的问题，可能有以下几个原因：
- 异步加载问题：如果你在应用程序启动时立即使用 ngx-translate 进行翻译，可能会遇到异步加载问题。因为翻译文件需要从服务器加载，可能会导致在组件初始化时翻译还未完成，因此在构造函数或 ngOnInit 中直接使用翻译服务可能不起作用。解决方法是使用
TranslateService的getTranslation()方法，在翻译文件加载完成后再进行翻译操作。 - 语言环境设置问题：确保你正确设置了应用程序的语言环境，并且加载了相应的翻译文件。你可以使用
TranslateService的use()方法来设置当前的语言环境，例如translateService.use('zh-CN')。 - Angular 变更检测问题：在 Angular 中，变更检测是通过 Zone.js 进行管理的。如果 ngx-translate 的翻译操作没有触发 Angular 的变更检测机制，那么界面上的文本将不会更新。确保在进行翻译后手动触发变更检测，可以使用
ChangeDetectorRef的detectChanges()方法来强制触发变更检测。
总结起来，解决 ngx-translate 在构造函数或 ngOnInit 中不起作用的问题，可以参考以下步骤：
- 在应用程序的入口文件（例如 app.component.ts）中，使用
TranslateService的getTranslation()方法加载翻译文件，并在加载完成后执行翻译操作。 - 在组件的构造函数或 ngOnInit 中使用翻译服务进行翻译。确保语言环境设置正确，并手动触发 Angular 的变更检测机制。
- 在 HTML 模板中使用 ngx-translate 的
translate指令或translate管道来展示翻译后的文本。
关于 ngx-translate 的更多信息和使用方法，你可以查阅腾讯云文档中的官方介绍和示例代码：ngx-translate 腾讯云产品介绍。这里提供了详细的文档和示例，以帮助你更好地理解和使用 ngx-translate。
相关·内容
4回答
我使用ngx-翻译和ngx-翻译/http-加载程序来翻译我的离子/角度项目。我在app.module.ts导入中有以下代码：
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpBackend]
}
})
这个加载程序在同一个文件中运行：
export function createTranslateLoader(handler: HttpBackend) {
const http =
浏览 0提问于2019-02-08得票数 3
回答已采纳
我有一个使用ngx翻译进行翻译的组件的角库：
@NgModule({
imports: [
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useClass: WebpackTranslateLoader,
deps: [HttpClient],
},
isolate: true
}),
],
...
})
浏览 2提问于2020-05-21得票数 1
回答已采纳
3回答
角4 Ngx-转换管不工作
、、、、
我想做一个角4应用程序，是多语言。我在上跟踪了答案，但它不起作用。
我做了每一步，从1到5在那个页面和我的应用模块看起来一样。
我在一个文件夹en.json中有一个文件i18n，位于我的资产文件夹中。该文件包含
{ "TEST":"little test"}
在我的HTML中：
<a [routerLink]="['/home']" class="tile waves-effect waves-light btn-large">
<span> {{ "TEST" | t
浏览 7提问于2017-08-07得票数 9
回答已采纳
2回答
我正在使用这个@ngx-转换/核心和@ngx-转换/http-加载程序i18n服务，它在模板(.html)中工作良好。
{{'title'|translate}}
现在我想在我的组件类型记录文件(.ts)中进行翻译，但是我不知道如何使用它。
我在构造器中注射translateService
constructor(private translate: TranslateService) {}
.component.ts
//update employee
editClick(item){
console.log(item);
this.emp=item;
this.ModalT
浏览 7提问于2022-05-12得票数 1
1回答
我正在尝试将i18n (与ngx-translate集成)添加到我的侧菜单中，它是一个常量对象，内有每一项。
我尝试导入i18n服务，然后将其声明为变量，以便在对象中使用它：
import { Menu } from './menu.model';
import { TranslateService } from '@ngx-translate/core';
let translate: TranslateService;
export const verticalMenuItems = [
new Menu(1, translate.instan
浏览 0提问于2019-07-11得票数 0
回答已采纳
1回答
我有一个方法load()，它在一个全局授权服务中运行，从服务器获取一个用户对象。此方法与APP_INITIALIZER一起运行。该方法如下所示：
load(): Promise<any> {
return this.http.get(API_ENDPOINT + ApiConstants.AUTHENTICATE).map(response => response.json() as User).toPromise().then((data: any) => {
this.user = data;
this.translate.u
浏览 0提问于2017-04-21得票数 0
9回答
我正在使用这个@ngx-translate/core i18n服务，它在模板(.html)中工作得很好，语法如下：
{{'my.i18n.key'|translate}}
现在我想翻译我的组件类型记录文件(.ts)中的一些内容，但是我不知道如何使用它。
我可以在构造函数中创建转换对象：
构造函数(私有翻译: TranslateService) {}
现在如何翻译“my.i18n.key”？
浏览 10提问于2017-08-24得票数 56
回答已采纳
我需要在MatDialog中的JSON视图中显示数据。我使用API来获取一些数据，然后使用MatDialog的data选项将其注入到对话框中。数据正在成功注入，并且还可以在对话框组件中访问。我使用ngx-json-viewer package在JSON视图中显示此数据，但它不起作用。下面是我如何打开对话框并向其中传递数据的方法- const logDetailsDialogRef = this.dialog.open(logDetailsDialog, {
data: {
logDetails
}
}); 这是我在我的模板页面上使用的- <ngx-jso
浏览 21提问于2021-01-21得票数 0
2回答
我试图在我的角度应用程序中使用ngx-smart-modal在click上显示一个模态。我目前面临的问题是，一旦加载了组件视图，就会在加载时显示该模型。
在文档中，指定"autostart" =false在组件初始化时不加载模型，但这似乎不起作用
这是我的模板视图
<!-- Trigger/Open The Modal -->
<button id="myBtn" class="btn btn-primary"
(click)="openModal($event)" >Open Modal<
浏览 0提问于2018-08-16得票数 0
回答已采纳
1回答
我正在开发角13应用程序，我在ngx翻译方面有问题。问题是，当我在项目中导航时，我使用TranslateService获得的翻译工作正常，但是每次我刷新页面时，我使用TranslateService获得的翻译都没有被翻译。下面是我的代码模板(示例)：
getKeywords() {
this._translate.get([
"keywords.keyword1",
"keywords.keyword2",
"keywords.keyword3",
]).subscribe(result => {
this.keyword1
浏览 6提问于2022-05-10得票数 1
我在角度上使用ToastrModule有问题。我安装了软件包：
npm install ngx-toastr --save
npm install @angular/animations --save
然后我在"node_modules/ngx-toastr/toastr.css"中添加了angular.json
"styles": [
"node_modules/ngx-toastr/toastr.css",
"node_modules/bootstrap/
浏览 11提问于2021-11-15得票数 0
回答已采纳
我对离子3和角4非常陌生。我正在尝试翻译一个页面，但是当我运行这个应用程序时，我会得到这个错误。如文档所述，我添加了库并导入了所有内容，并在app模块中的providers数组中添加了翻译服务，但仍然会出现此错误。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, Ioni
浏览 5提问于2017-10-14得票数 1
回答已采纳
我在typeScript和Range2中面临一个问题。我的TS类如下，
'import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-blogdetail',
templateUrl: './blogdetail.component.html',
styleUrls: ['./blogdetail.compon
浏览 0提问于2017-03-20得票数 1
回答已采纳
1回答
我使用的角度管道和服务创建，这是工作文件与html代码。但当我在TS文件中使用它时，它们不起作用。
翻译服务
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class TranslateServices {
data: any = {};
constructor(private ht
浏览 0提问于2019-03-04得票数 0
为什么表行中的按钮不能工作？
我只期望它通过调用modal-basic.ts文件中的一个函数在控制台中打印一条消息。
modal-basic.html:
<td><button (click)="test()">Test</button></td>
modal-basic.ts:
test() {
console.log("Test...");
}
您可以在以下中找到一个StackBlitz：
浏览 0提问于2019-07-11得票数 5
回答已采纳
我试图用这个问题中的所有这些例子来解决我的任务，我不知道如何将TranslateService连接到我的方法。
瑞典语翻译文件se.json (无键)
{
NAME: Namn
}
英文翻译文件en.json (无键)
{
NAME: Name
}
打字：
从“@ngx-translate/core”导入{ TranslateService }；
constructor {
private translate: TranslateService
} {
this.translate.use(localStorage.getItem("language"
浏览 2提问于2021-05-19得票数 0
我想在 4中添加多语言功能，并从数据库(PostgreSQL)获取数据。
使用ngx-翻译模块，我们必须创建.json文件语言vise，但我想从数据库中获取本地化(数据)。
浏览 0提问于2017-10-25得票数 3
1回答
哦，伙计们，你们好吗？我在Angular 9的这个项目上使用ngx translate时遇到了一个问题，它没有得到资源中的翻译。你能帮我做这个吗？显然一切都很好。 appModule
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: Htt
浏览 14提问于2021-09-11得票数 1
回答已采纳
我是newbie @ another，但我看不到任何提示，说明如何将Input变量从一个组件传递到另一个组件。我有一张以json对象为输入的卡片，可以在该模板上打印{{ json.name }}，但无法将json.name传递给子组件：
<nb-card-header>
{{ cardDetails.name }}
</nb-card-header>
<ngx-gauge-chart [name]=cardDetails.name></ngx-gauge-chart>
量规图组件：
@Component({
selecto
浏览 3提问于2019-09-26得票数 1
回答已采纳
5回答
我想实现ngx-翻译在角5项目，懒惰加载模块明智，它的工作，只有父模块，但不工作在我的子模块，所以请提出更好的解决方案。
我为app模块编写代码。
我正在使用@ngx-翻译/核心和@ngx-翻译/http-加载程序。
app.module.ts
TranslateModule.forRoot({
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
LayoutModule,
HttpClientModule,
浏览 0提问于2018-07-12得票数 7
虽然ngx-i18next是i18next的包装器，但我特别想知道ngx-translate和i18next在翻译方面的区别。
浏览 2提问于2017-10-20得票数 1
1回答
我正在尝试翻译一个应用程序，其中jointjs用于创建元素。如果自定义元素模板包含ex：{{ 'EXAMPLE' | translate }}，那么它将显示为{{ 'EXAMPLE' | translate }}，并且不会被翻译。在完成ngx转换之前，是否有生成组件的解决方案？谢谢
编辑具有TS类的ElementBuilder类，该类使用jointjs构建，在ExampleElement模板中使用具有TS类的带有ExampleElement模板的TS类，在ExampleElement模板中使用未翻译的：{{ 'EXAMPLE' | transla
浏览 1提问于2018-09-27得票数 1
我正面临着ngx翻译的问题！也就是说，我有两个带有不同语言的精子API，例如，类似于这个http://example.com/api和http://example.com/fr/api/
现在在ngx翻译，我必须使用en/fr.json文件来翻译我的角度应用程序！就像我从医生那里看到的！
但是现在我需要使用来自两个API的数据！它已经在服务器上翻译了！
http://example.com/api
http://example.com/fr/api/
我的问题是我是怎么做到的？！还是继续使用json files吧，因为我的应用程序中有一些静态单词，比如the application m
浏览 0提问于2019-02-06得票数 0
回答已采纳
我正在我的Ionic 4应用程序中工作，我在Ionic 4中开发多语言应用程序，我使用警报控制器来显示语言，但问题是当用户选择特定的语言时，如何改变语言。
这是我的app.component.ts
language: any = 'en';
constructor(private translate: TranslateService) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.translate.addLangs([
浏览 0提问于2019-03-05得票数 0
回答已采纳
3回答
我正在用角4做一个项目，我安装了ngx引导程序，数据选择器是英文的。我在app.module.ts中插入了以下行：
import { defineLocale } from 'ngx-bootstrap/chronos';
import { ptBrLocale } from 'ngx-bootstrap/locale';
defineLocale('pt-br', ptBrLocale);
然后，我进入页面的组件，在其中调用我的datepicker，我做了导入，并声明：
import { Component, OnInit } from &#
浏览 2提问于2018-03-07得票数 2
回答已采纳
1回答
这在作为开发运行时正确工作，但当您运行命令以产生以下错误时：
工作：
ionic cordova run android
不起作用：
ionic cordova run android --prod --release
错误：
[03:34:41] typescript error
Unexpected module 'TranslateModule in C:/Users/tm_ma/Doc/PROJECT/node_modules/@ngx-translate/core/core.d.ts' declared by the modu
浏览 1提问于2018-11-22得票数 2
5回答
我想扩展ngx-translate的管道，使其在我的应用程序中具有潜在的多用途。
我的烟斗：
import { Pipe, PipeTransform } from '@angular/core';
import { TranslatePipe } from "@ngx-translate/core";
@Pipe({
name: 'msg'
})
export class MsgPipe extends TranslatePipe implements PipeTransform {
transform(value: any, ar
浏览 2提问于2017-09-27得票数 3
我试图访问ngOnit内部的rest，如下所示：
ngOnInit(): void {
this.myModel = new myModel ();
Observable.forkJoin(
this.myService.getdata(),
this.myService2.getData2(id)
).subscribe(
data => {
this.data1 = data[0];
this.data2 = data[1];
},
浏览 1提问于2017-10-10得票数 6
我试图使用ngx翻译模块进行翻译，但是当我将TranslateService注入app.component.ts中时，我会收到以下警告。
Can't resolve all parameters for AppComponent in ./rsa/src/app/app.component.ts: (?, [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]).
我还注射了其他能正常工作的服务。
我的ngx翻译版本如下：
"@ngx
浏览 5提问于2020-05-11得票数 0
我在研究在APP_INITIALIZER中加载ngx翻译时偶然发现了APP_INITIALIZER(参见 )。
import { Injector, APP_INITIALIZER } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { LOCATION_INITIALIZED } from '@angular/common';
export function appInitializerFactory(translate:
浏览 0提问于2018-05-09得票数 11
3回答
我正在使用ngx-admin，并且我正在尝试使我的ngx-线图具有响应性。
我的图表在nb-card中，当我调整窗口大小时，nb-card完全响应。因此，我希望我的图表调整大小，以适应nb-card。
我的html代码：
<div style="margin: 100px auto auto">
<nb-card>
<nb-card-header>XXXXXXXXXX</nb-card-header>
<nb-card-body>
<
浏览 0提问于2018-09-28得票数 27
回答已采纳
我正在尝试在角度翻译中得到一个ngx-translate的字典，因为这是一个函数getTranslationTable()，在ngx-translate中有类似的东西吗？
浏览 3提问于2019-04-29得票数 0
1回答
嗨，伙计们，我正在尝试为nginx构建一个模块，并且需要匹配子字符串，下面是我尝试和匹配的内容
int match_chan(ngx_http_request_t *r, ngx_pool_t *temp_pool, ngx_str_t *body, ngx_str_t *channel) {
u_char errstr[NGX_MAX_CONF_ERRSTR];
ngx_regex_compile_t *rc;
int captures[2];
if ((rc = ngx_pcalloc(temp_pool, sizeof(ngx_regex_compile_
浏览 9提问于2014-07-04得票数 1
1回答
我使用的是ag-grid框架的AgGridModule Angular包装器。我的应用程序是一个Angular AOT应用程序，它使用ngx-translate库(它在页面加载时为当前选择的语言动态加载翻译数据文件)来处理本地化。这意味着翻译只能异步使用。因此，我不能只在gridOptions (as recommended)中设置localeText属性，因为在生成网格之前我没有文本。 有没有人知道如何处理这种情况？理想情况下，我只需为localeText属性分配一个RxJS Observable，它将在准备就绪时发送适当的文本对象，但这目前似乎不起作用。
浏览 79提问于2019-01-18得票数 0
我正在创建离子型4角度的应用程序，使用ngx翻译来翻译一个或更多的languages.by，使用ngx翻译在html.but中很容易翻译-如何翻译alertController中的文本信息和mat-snackbar消息。
//using below ngx-translate
import { TranslateService } from '@ngx-translate/core';
constructor(public translate:TranslateService){}
//Alert Controller
async alert_Massage()
浏览 4提问于2019-10-07得票数 1
回答已采纳
1回答
我想我还没有很好地理解外化概念。我有一个简单的下拉列表，其选项存储在相应的类型记录文件中。
<select>
<option *ngFor="let source of modeOptions" [value]="source">
{{ source }}
</option>
</select>
类型标
modeOptions= ['Calendar year', 'Current quarter', 'Rolling year'];
但现在我决定把
浏览 0提问于2019-12-18得票数 0
回答已采纳
我正在尝试使用ngx翻译将我的角度应用程序翻译成多种语言。最近，我刚刚意识到ngx翻译服务正在下载我的JSON文件，该文件包含所有翻译键和值，每种语言的大小超过5 mb。
有没有办法在不更改JSON文件的情况下阻止下载？
我需要的是这样的东西:客户端发送键或多个键来获得翻译，ngx翻译在JSON文件中搜索那些键的值(例如en.us)，然后响应这个转换请求。使用此解决方案，我不需要将整个JSON文件下载到客户端浏览器中。我找了很多次，但没有找到正确的答案。
这是我的ng模块：
@NgModule({
declarations: [
AppComponent
],
import
浏览 3提问于2022-09-26得票数 0
1回答
我遵循本教程()关于角度翻译的内容。当我调用HTML文件中的翻译时，什么也没有发生，我看到了一个空行：
<label translate='demo.title'></label>
但是在我的component.ts中，如果我导入导入{TranslateService} from '@ngx-translate/core';，我可以使用以下方法获得正确的翻译：
title:string;
constructor(private translate: TranslateService) { }
ngOnInit() {
thi
浏览 2提问于2019-11-11得票数 0
我已经在我的Angular应用程序中实现了ngx翻译，并且在执行以下操作时工作得很好：
<div>{{ 'some.value' | translate }}</div>
但是如何翻译HTML组件的属性呢？类似于：
<div data-text="{{ 'some.value' | translate }}"></div>
(以上代码不起作用)
谢谢你提供的帮助..。
JB
浏览 2提问于2017-11-22得票数 4
回答已采纳
1回答
我有一个依赖于接口的ChatService A。
import { Injectable, Inject } from '@angular/core';
import { NGXLogger } from 'ngx-logger';
import { TokenHttpService } from '@lib/interfaces';
@Injectable({
providedIn: 'root'
})
export class ChatService {
constructor(
@Inject('T
浏览 2提问于2020-01-07得票数 0
回答已采纳
我正在使用ngx-translate，现在我想添加一个LoadingInterceptor。这是一个在发出HTTPInterceptor请求时显示LoadingSpinner的API。 我已经在使用令牌拦截器了。但是当我安装LoadingInterceptor时，ngx-translate就不再工作了。 这是我的loading.interceptor.ts import { Observable } from 'rxjs';
// import { LoadingService } from './../../../services/loading.service&#
浏览 15提问于2021-01-12得票数 0
回答已采纳
2回答
首先，我已经阅读了有关这方面的前几篇文章。所有的解决方案对我都没有用。
我有一个基于Cordova的应用程序(非离子型)，它部署在安卓和iOS上。除了我的翻译不能在iOS设备(模拟器或真实设备)上工作外，一切都很好。我正在使用ngx翻译，它在浏览器或Android设备上没有问题。
这是我的装置：
app.module.ts
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpCli
浏览 2提问于2020-06-05得票数 1
回答已采纳
当我打开web时，数据是显示的，但我更改了组件并返回了这个组件数据，而不是show.It，没有显示任何项目。我检查了日志，但没有运行到ngOnIt。ngOnIt在web strat或web重新加载时运行。
这是stock.service.ts
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
imp
浏览 12提问于2018-03-03得票数 5
回答已采纳
4回答
有多种方法来翻译一个(角)应用程序，主要的方法是：
和
据我所知，i18n对于SEO来说更容易，因为它使用
e.g
app.com/de
app.com/en
另一方面，使用ngx翻译，更容易在语言之间切换。
我知道ngx翻译的创建者是受雇于i18n的。有人能告诉我主要的区别(赞成还是反对)吗？
浏览 4提问于2017-07-05得票数 38
回答已采纳
1回答
我已经在我的应用程序中安装了@ngx-translate/core版本14.0.0和@ngx-translate/http-loader版本^7.0.0，并遵循了一些教程(例如。( )关于如何向角点添加多种语言。我的角度版本是11.2.10。
在我成功地完成了所有步骤之后，出现了这个错误。我尝试过多种方法，比如更新版本，但是没有一个解决了这个问题。
有人知道怎么解决这个问题吗？
Error: node_modules/@ngx-translate/core/lib/missing-translation-handler.d.ts:34:21 - error TS2694: Namespace
浏览 9提问于2022-02-14得票数 4
这是我的代码：
.HTML：
<div fxFlex>
<ngx-charts-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="single0"
[gradient]="gradient"
[l
浏览 1提问于2020-08-24得票数 0
我正在开发一个Ionic3应用程序，希望允许用户从他们的设备上上传文件。我有一个问题，科多瓦/phonegap文件选择插件。我按照这里的指示：
但是，即使使用Ionic文档中给出的最简单的代码也不起作用：
import { IOSFilePicker } from '@ionic-native/file-picker/ngx';
constructor(private filePicker: IOSFilePicker) { }
this.filePicker.pickFile()
.then(uri => console.log(uri))
.catch(
浏览 0提问于2019-04-11得票数 0
回答已采纳
1回答
我有两个子组件，我希望在它们之间传递数据，为此我使用服务。
我在服役
headerObject = new Subject<HeaderObject>();
在第一个组件中，我有一个方法
onClick() {
this.listImage = this.imageService.getImages();
let headers = new HeaderObject();
headers.file = this.listImage[0].data;
this.documentService.getOcrDocument(headers).sub
浏览 2提问于2017-08-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
