2017-10-17 3 views
0

角度アプリに多言語機能を追加したいが、サイトが読み込まれたときにデフォルトの言語を設定したい。私は2つの言語、スペイン語と英語を持っており、デフォルト言語はスペイン語です。私は、次のルーティングが定義されていることを達成するために:すべての角度4のパラメータを取得

const routes: Routes = [ 
    { 
    path: ':lang', component: LanguageComponent, 
    children: [ 
     { path: 'route1', component: Component1 }, 
     { path: 'route2', component: Component2 }, 
     { path: 'route3', component: Component3 }, 
     { path: 'route4', component: Component4 }, 
     { path: '', component: Component1 , pathMatch: 'full' }, 
    ], 
    }, 
    { path: '', redirectTo: 'es', pathMatch: 'full' } 
]; 

まず、私はそれは私が両方に同じルートセットを持っているどの達成したいものを考えるとルーティングの正しい構造のかどうかわからないということです私が開発した翻訳サービスで実行時に翻訳を実行します。私の主な問題は、私がルートのparamsを調べようとすると、私はいつも未定義になるということです。これは私のonInitです:

this.activatedRoute.params.subscribe((params: Params) => { 
    this.currentLanguage = params['lang']; 
}); 

私も試してみました:

this.activatedRoute.params.subscribe((params) => { 
    this.currentLanguage = params.lang; 
}); 

私はこの問題は、リダイレクトしていると思いますが、私は設定する方法がわからない:私は実行すると、パラメータ「LANG」をそのリダイレクト。それは理にかなっていますか?

+0

あなたはこれらのルートはパラメータはありませんが、彼らの親がするようにあなたが 'this.activatedRoute.parent.params'を呼び出す必要がありますComponentN''から呼び出す場合...私はそもそも実装一つの解決策だった – n00dl3

答えて

0

私は最善の解決策は、LanguageComponentに設定されている言語を提供しますどのAppTranslateServiceを作成することになると思う。

@Injectable() 
export class AppTranslateService { 
    public lang: string = 'es'; 
} 

@Component({/*...*/}) 
export class LanguageComponent { 
    constructor(appTranslateService: AppTranslateService, activatedRoute: ActivatedRoute) { 
    activatedRoute.params.subscribe((params) => { 
     appTranslateService.lang = params['lang']; 
    }); 
    } 
} 

を、ちょうど他のコンポーネントにappTranslateService.lang変数をお読みください。

また、AngularのRouter注射液から目的の成分を直接成分に得ることができます。この方法:router.url.split('/')[1](またはサービスで一度やります)。

+0

、感謝!その後、私はlang paramにアクセスしたいコンポーネントがLanguageComponentと同じレベルの階層にないことに気づいたので、常にnullになっていました。私はコンポーネントの依存関係のツリーを再構築し、activatedRoute.params.subscribeを通してきれいにアクセスすることができました。乾杯! –

関連する問題