この記事で解決できる悩み
いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴9年）で、資格は13個保有しています。
「Angularのngx-translateでメッセージにパラメータを渡す方法を知りたい」とお考えではありませんか？
多言語対応で使う「ngx-translate」ですが、動的に変わる内容をメッセージに設定したいことってないですか？（僕はある）
いずみ設定方法は超簡単なのでサクッと解説します。
本記事を読めば、Angularのngx-translateでメッセージにパラメータを渡す方法について分かるので早速見ていきましょう！
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいませ。
目次
【Angular】ngx-translateでメッセージにパラメータを渡す方法
早速ですが、Angularのngx-translateでメッセージにパラメータを渡す方法を解説します。
STEP
パラメータ設定
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app',
template: `
<div>{{ 'HELLO' | translate:param }}</div>
`
})
export class AppComponent {
param = {value: 'world'};
constructor(translate: TranslateService) {}
}「translate:param」と記載すればparamの内容を設定できます。
STEP
メッセージ設定
{
"HELLO": "hello {{value}}"
}メッセージを定義しているjsonファイルは上記のように記載すればOKです。
いずみ超簡単ですね。
まとめ
今回は、Angularのngx-translateでメッセージにパラメータを渡す方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Angularの勉強なら「Angularアプリケーションプログラミング
」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
