如何使用 i18n 角度翻译管理链接

Question

I am doing an angular app and I am now translating it using i18n .

My question is : How do we manage links over different locales ?

My first idea was to translate them in order to add and manage the locale code in the url, but I am afraid this wont work.

For example :

<a href="/login">Login</a> would become <a href="/fr/login" i18n-href>Login</a>

And then that fr would be replaced in each locale file.

But I'm afraid this is not the good way, and I'm afraid it will end in something like mysite.com/fr/fr/login , what won't work.

I have the same question for routerLinks but I think this should be the same thing.

Answer 1

So after a few testing it appears that the behavior is different for routerLinks and href

The routerLink itself is managed by angular, so you don't need to add a prefix in the URL to manage your locale. routerLink=/my/page will lead to /fr/my/page if you are currently in a /fr page.

For href , it's different. You have to manage the locales yourself and if you don't do, you will get 404 errors (as /my/page will not exist anymore once the localize package is enabled).

Therefore, I would not recommand to use href for intern links (it was already a pretty bad habbit in my opinion but it gets a real problem here).

Have a nice day ! :)