国際化( i 18 n )コンポーネントの角アプリケーションへの追加
16883 ワード
導入
Angular ウェブ、モバイル、デスクトップアプリケーションを構築するための開発プラットフォームです.現在、角度はバージョン13です、そして、Googleはプロジェクトの主な管理者です.
@ngx-translate 多くの設定オプションを持つ国際化(i 18 n)コンポーネントライブラリです.
必要条件
起動する前に、ツールをインストールして設定する必要があります.
起動する前に、ツールをインストールして設定する必要があります.
始める
角度アプリケーションの作成
1 .角度ベース構造を使用したアプリケーションの作成@angular/cli
ルートファイルとSCSSスタイル形式で.
ng new angular-internationalization
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
CREATE angular-internationalization/README.md (1073 bytes)
CREATE angular-internationalization/.editorconfig (274 bytes)
CREATE angular-internationalization/.gitignore (604 bytes)
CREATE angular-internationalization/angular.json (3339 bytes)
CREATE angular-internationalization/package.json (1090 bytes)
CREATE angular-internationalization/tsconfig.json (783 bytes)
CREATE angular-internationalization/.browserslistrc (703 bytes)
CREATE angular-internationalization/karma.conf.js (1445 bytes)
CREATE angular-internationalization/tsconfig.app.json (287 bytes)
CREATE angular-internationalization/tsconfig.spec.json (333 bytes)
CREATE angular-internationalization/src/favicon.ico (948 bytes)
CREATE angular-internationalization/src/index.html (313 bytes)
CREATE angular-internationalization/src/main.ts (372 bytes)
CREATE angular-internationalization/src/polyfills.ts (2820 bytes)
CREATE angular-internationalization/src/styles.scss (80 bytes)
CREATE angular-internationalization/src/test.ts (788 bytes)
CREATE angular-internationalization/src/assets/.gitkeep (0 bytes)
CREATE angular-internationalization/src/environments/environment.prod.ts (51 bytes)
CREATE angular-internationalization/src/environments/environment.ts (658 bytes)
CREATE angular-internationalization/src/app/app-routing.module.ts (245 bytes)
CREATE angular-internationalization/src/app/app.module.ts (393 bytes)
CREATE angular-internationalization/src/app/app.component.scss (0 bytes)
CREATE angular-internationalization/src/app/app.component.html (24617 bytes)
CREATE angular-internationalization/src/app/app.component.spec.ts (1139 bytes)
CREATE angular-internationalization/src/app/app.component.ts (233 bytes)
✔ Packages installed successfully.
2 .ブートストラップCSSフレームワークのインストールと設定.ポストのステップ2と3をしてください.
インストール@ngx-translate/core
and @ngx-translate/http-loader
ライブラリ.
npm install @ngx-translate/core @ngx-translate/http-loader
インポートHttpClient
, HttpClientModule
, TranslateModule
, TranslateLoader
and TranslateHttpLoader
モジュール変更するapp.module.ts
ファイルを追加し、以下の行を追加します.
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient],
},
defaultLanguage: 'en-US',
}),
AppRoutingModule,
],
5 .作成de-DE.json
, en-US.json
, es-ES.json
, fr-FR.json
and pt-BR.json
中のファイルsrc/assets/i18n
フォルダ.
下記の内容をde-DE.json
ファイル.
{
"hello": "Hallo, {{name}}!"
}
7 .下記の内容を加えるen-US.json
ファイル.
{
"hello": "Hello, {{name}}!"
}
下記の内容をes-ES.json
ファイル.
{
"hello": "Hola, {{name}}!"
}
下記の内容をfr-FR.json
ファイル.
{
"hello": "Bonjour, {{name}}!"
}
10 .下記の内容を加えるpt-BR.json
ファイル.
{
"hello": "Olá, {{name}}!"
}
11 .内容を削除するAppComponent
からのクラスsrc/app/app.component.ts
ファイル.インポートTranslateService
サービスと作成changeLanguage
以下の方法.
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(public translateService: TranslateService) {
}
public changeLanguage(language: string): void {
this.translateService.use(language);
}
}
12 .内容を削除するsrc/app/app.component.html
ファイル.ボタンを下に追加します.
<div class="container-fluid py-3">
<h1>Angular Internationalization (i18n)</h1>
<div class="btn-group btn-group-sm py-5">
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="changeLanguage('de-DE')" [class.active]="translateService.currentLang === 'de-DE'">Deutschland</button>
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="changeLanguage('en-US')" [class.active]="!translateService.currentLang || translateService.currentLang === 'en-US'">English</button>
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="changeLanguage('es-ES')" [class.active]="translateService.currentLang === 'es-ES'">Español</button>
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="changeLanguage('fr-FR')" [class.active]="translateService.currentLang === 'fr-FR'">Francés</button>
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="changeLanguage('pt-BR')" [class.active]="translateService.currentLang === 'pt-BR'">Português</button>
</div>
<h3>{{ "hello" | translate: { name: "Angular" } }}</h3>
</div>
13 .下のコマンドでアプリケーションを実行します.
npm start
> [email protected] start
> ng serve
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 2.57 MB
styles.css | styles | 266.58 kB
polyfills.js | polyfills | 128.54 kB
scripts.js | scripts | 76.67 kB
main.js | main | 13.03 kB
runtime.js | runtime | 6.66 kB
| Initial Total | 3.05 MB
Build at: 2021-08-15T20:12:53.818Z - Hash: 9462fdcfd1de35681ab4 - Time: 11933ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
14 .準備完了!URLにアクセスするhttp://localhost:4200/
そして、アプリケーションが動作しているかどうかを確認します.アプリケーションの作業GitHub Pages and Stackblitz .
アプリケーションリポジトリはhttps://github.com/rodrigokamada/angular-internationalization .
このチュートリアルはblog ポルトガル語.
Reference
この問題について(国際化( i 18 n )コンポーネントの角アプリケーションへの追加), 我々は、より多くの情報をここで見つけました
https://dev.to/rodrigokamada/adding-the-internationalization-i18n-component-to-an-angular-application-4pac
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
ng new angular-internationalization
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
CREATE angular-internationalization/README.md (1073 bytes)
CREATE angular-internationalization/.editorconfig (274 bytes)
CREATE angular-internationalization/.gitignore (604 bytes)
CREATE angular-internationalization/angular.json (3339 bytes)
CREATE angular-internationalization/package.json (1090 bytes)
CREATE angular-internationalization/tsconfig.json (783 bytes)
CREATE angular-internationalization/.browserslistrc (703 bytes)
CREATE angular-internationalization/karma.conf.js (1445 bytes)
CREATE angular-internationalization/tsconfig.app.json (287 bytes)
CREATE angular-internationalization/tsconfig.spec.json (333 bytes)
CREATE angular-internationalization/src/favicon.ico (948 bytes)
CREATE angular-internationalization/src/index.html (313 bytes)
CREATE angular-internationalization/src/main.ts (372 bytes)
CREATE angular-internationalization/src/polyfills.ts (2820 bytes)
CREATE angular-internationalization/src/styles.scss (80 bytes)
CREATE angular-internationalization/src/test.ts (788 bytes)
CREATE angular-internationalization/src/assets/.gitkeep (0 bytes)
CREATE angular-internationalization/src/environments/environment.prod.ts (51 bytes)
CREATE angular-internationalization/src/environments/environment.ts (658 bytes)
CREATE angular-internationalization/src/app/app-routing.module.ts (245 bytes)
CREATE angular-internationalization/src/app/app.module.ts (393 bytes)
CREATE angular-internationalization/src/app/app.component.scss (0 bytes)
CREATE angular-internationalization/src/app/app.component.html (24617 bytes)
CREATE angular-internationalization/src/app/app.component.spec.ts (1139 bytes)
CREATE angular-internationalization/src/app/app.component.ts (233 bytes)
✔ Packages installed successfully.
npm install @ngx-translate/core @ngx-translate/http-loader
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient],
},
defaultLanguage: 'en-US',
}),
AppRoutingModule,
],
{
"hello": "Hallo, {{name}}!"
}
{
"hello": "Hello, {{name}}!"
}
{
"hello": "Hola, {{name}}!"
}
{
"hello": "Bonjour, {{name}}!"
}
{
"hello": "Olá, {{name}}!"
}
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(public translateService: TranslateService) {
}
public changeLanguage(language: string): void {
this.translateService.use(language);
}
}
<div class="container-fluid py-3">
<h1>Angular Internationalization (i18n)</h1>
<div class="btn-group btn-group-sm py-5">
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="changeLanguage('de-DE')" [class.active]="translateService.currentLang === 'de-DE'">Deutschland</button>
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="changeLanguage('en-US')" [class.active]="!translateService.currentLang || translateService.currentLang === 'en-US'">English</button>
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="changeLanguage('es-ES')" [class.active]="translateService.currentLang === 'es-ES'">Español</button>
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="changeLanguage('fr-FR')" [class.active]="translateService.currentLang === 'fr-FR'">Francés</button>
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="changeLanguage('pt-BR')" [class.active]="translateService.currentLang === 'pt-BR'">Português</button>
</div>
<h3>{{ "hello" | translate: { name: "Angular" } }}</h3>
</div>
npm start
> [email protected] start
> ng serve
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 2.57 MB
styles.css | styles | 266.58 kB
polyfills.js | polyfills | 128.54 kB
scripts.js | scripts | 76.67 kB
main.js | main | 13.03 kB
runtime.js | runtime | 6.66 kB
| Initial Total | 3.05 MB
Build at: 2021-08-15T20:12:53.818Z - Hash: 9462fdcfd1de35681ab4 - Time: 11933ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
Reference
この問題について(国際化( i 18 n )コンポーネントの角アプリケーションへの追加), 我々は、より多くの情報をここで見つけました https://dev.to/rodrigokamada/adding-the-internationalization-i18n-component-to-an-angular-application-4pacテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol