mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-08 11:11:53 +08:00
docs(angular): add readme for ngx-translate
This commit is contained in:
parent
d64e49ba1a
commit
26b664eecb
@ -0,0 +1,58 @@
|
|||||||
|
import { Meta } from '@storybook/addon-docs/blocks';
|
||||||
|
|
||||||
|
<Meta title="Others / ngx-translate / Readme" />
|
||||||
|
|
||||||
|
# [ngx-translate](https://github.com/ngx-translate/core)
|
||||||
|
|
||||||
|
> No real example here to avoid adding more dependency to sotrybook mono repository
|
||||||
|
|
||||||
|
There are several ways to configure ngx-translate in storybook which will depend on your context.
|
||||||
|
|
||||||
|
Here is a simple example with a storybook decorator that you can place in the `preview.ts` or locally on the stories.
|
||||||
|
[See the doc on decorators](https://storybook.js.org/docs/angular/writing-stories/decorators)
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { HttpClient, HttpClientModule } from '@angular/common/http';
|
||||||
|
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
|
||||||
|
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
||||||
|
import { moduleMetadata } from '@storybook/angular';
|
||||||
|
|
||||||
|
function createTranslateLoader(http: HttpClient) {
|
||||||
|
return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
|
||||||
|
}
|
||||||
|
|
||||||
|
const TranslateModuleDecorator = (storyFunc, context) => {
|
||||||
|
const { locale } = context.globals;
|
||||||
|
|
||||||
|
return moduleMetadata({
|
||||||
|
imports: [
|
||||||
|
HttpClientModule,
|
||||||
|
TranslateModule.forRoot({
|
||||||
|
defaultLanguage: locale,
|
||||||
|
loader: {
|
||||||
|
provide: TranslateLoader,
|
||||||
|
useFactory: createTranslateLoader,
|
||||||
|
deps: [HttpClient],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
})(storyFunc, context);
|
||||||
|
};
|
||||||
|
|
||||||
|
// for `preview.ts`
|
||||||
|
export const decorators = [TranslateModuleDecorator];
|
||||||
|
```
|
||||||
|
|
||||||
|
If the `TranslateModule.forRoot` is made by another module you can try to set this provider `DEFAULT_LANGUAGE`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { DEFAULT_LANGUAGE } from '@ngx-translate/core';
|
||||||
|
|
||||||
|
const TranslateModuleDecorator = (storyFunc, context) => {
|
||||||
|
const { locale } = context.globals;
|
||||||
|
|
||||||
|
return moduleMetadata({
|
||||||
|
providers: [{ provide: DEFAULT_LANGUAGE, useValue: locale }],
|
||||||
|
})(storyFunc, context);
|
||||||
|
};
|
||||||
|
```
|
Loading…
x
Reference in New Issue
Block a user