问题
I have been reading up a lot on Angular 2+ i18n and have been looking for the best way to try and build dynamic components.
Problem:
- i18n cannot translate a variables text into an xlf file for dynamic
- i18n makes it hard to make dynamic components with text using i18n attribute
Possible Solution:
Even though we cannot use dynamic strings in variables for i18n to pick up when generating the language resource file we should still be able to create components and pass text to them. For the example below is one form using <app-error> to display one inputs error message as well as animations. There will be other forms so the <app-error> component has to be reusable.
With reusability in mind for other form components I have done something similar to the following. This way allows passing text and using transclusion to inject the already translated text into the error message <app-error> component.
form.component.html
<app-error
i18n="Error | form validation">
Please enter a first name.
</app-error>
app-error.component.html
<li>
<ng-content></ng-content>
</li>
I was able to come up with the above solution to work correctly as i18n will pick it up and translate it as well as the text gets injected properly with <ng-content>. So this looks like a great solution right?
My thought is there must be a better way for passing translated text to components or be able to build dynamic components utilizing i18n. Is there a possible solution for this?
来源：https://stackoverflow.com/questions/50742292/angular-i18n-translation-for-dynamic-component