angular - 如何在指令中使用 ngx translate
问题描述
我的 Angular 项目中有一个工作 ngx translate。在我的普通组件中,它们有一个 .module.ts 文件,我可以将我的 translateModule 放入 declerations 数组中,但我有一个没有 module.ts 的指令,所以我的指令无法实现我的 ngx 翻译。那么我该如何解决这个问题呢?我的版本:“@ngx-translate/core”:“^13.0.0”,“@ngx-translate/http-loader”:“^6.0.0”,
角 9 离子角 5
在我的 html 中:{{'weather' | translate}}
但我的指令无法识别它
我的 app.module.ts:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { HTTP } from '@ionic-native/http/ngx';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import { IonicStorageModule } from '@ionic/storage';
import { HttpService } from './services/http.service';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import {MatInputModule} from '@angular/material/input';
import {MatCardModule} from '@angular/material/card';
import {MatSelectModule} from '@angular/material/select';
import {MatDialogModule} from '@angular/material/dialog';
import { HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}
@NgModule({
declarations: [AppComponent],
entryComponents: [],
schemas:[CUSTOM_ELEMENTS_SCHEMA],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
MatIconModule,
IonicStorageModule.forRoot(),
FormsModule,
CommonModule,
BrowserAnimationsModule,
MatInputModule,
MatCardModule,
MatSelectModule,
MatDialogModule,
ReactiveFormsModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (HttpLoaderFactory),
deps: [HttpClient]
}
})
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
HTTP,
Geolocation,
NativeStorage,
HttpService,
MatDialogModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
例如,我的正常工作组件模块之一带有翻译:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { DashboardPageRoutingModule } from './dashboard-routing.module';
import { DashboardPage } from './dashboard.page';
import { ToolbarCustomComponent } from 'src/app/directives/toolbar-custom/toolbar-custom.component';
import { TranslateModule } from '@ngx-translate/core';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
DashboardPageRoutingModule,
TranslateModule
],
declarations: [DashboardPage, ToolbarCustomComponent]
})
export class DashboardPageModule {}
解决方案
我在这里创建了一个 sharedModule.ts 文件:(您不需要将此文件导入到某个地方或做任何额外的事情,仅此而已)
和 sharedModule.ts 的代码:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ToolbarCustomComponent } from './directives/toolbar-custom/toolbar-custom.component';
import { TranslateModule } from '@ngx-translate/core';
@NgModule({
imports: [
CommonModule,
TranslateModule
],
declarations: [
ToolbarCustomComponent //your custom component
],
exports: [
ToolbarCustomComponent //your custom component
]
})
export class SharedModule {}
在您的 html 中:
{{'dashboardPage.yourReservations' | translate}}
推荐阅读
- c - 指针失去价值?
- pytorch - PyTorch,除以零时,将结果值设置为 0
- orbeon - Orbeon 使 Authorization 标头可选
- django - 如何根据用户输入查询数据库并在另一个页面中显示结果?
- html - Why CSS selector :first-child:not(.ignore) doesn't exclude `ignore` class from selection?
- php - 检查php中数组中所有值的相等性
- r - R / igraph:调整顶点上边缘的交汇点
- laravel - Laravel 无需注册即可登录
- javascript - 如何将对象数组转换为特定格式的对象?
- excel - 锁定和解锁其他单元格后合并单元格不起作用