-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: Add Spanish translations to Injector/Intl doc pages (#199)
* docs: Translate Injector pages to Spanish * docs: Translate Intl page to Spanish * Address feedback (missing translations, removing original language text)
- Loading branch information
Showing
13 changed files
with
1,457 additions
and
0 deletions.
There are no files selected for viewing
62 changes: 62 additions & 0 deletions
62
docs/src/content/docs/es/utilities/Injectors/active-element.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
--- | ||
title: injectActiveElement | ||
description: Una utilidad de Angular para crear un Observable que emite el elemento activo del documento. | ||
badge: stable | ||
contributor: nevzat-topçu | ||
--- | ||
|
||
## Importa la función | ||
|
||
```ts | ||
import { injectActiveElement } from 'ngxtension/active-element'; | ||
``` | ||
|
||
## Uso | ||
|
||
### Básico | ||
|
||
Crea un Observable que emite cuando el elemento activo -enfocado- cambia. | ||
|
||
```ts | ||
import { Component } from '@angular/core'; | ||
import { injectActiveElement } from 'ngxtension/active-element'; | ||
|
||
@Component({ | ||
standalone: true, | ||
selector: 'app-example', | ||
template: ` | ||
<button>btn1</button> | ||
<button>btn2</button> | ||
<button>btn3</button> | ||
<span>{{ (activeElement$ | async)?.innerHTML }}</span> | ||
`, | ||
}) | ||
export class ExampleComponent { | ||
activeElement$ = injectActiveElement(); | ||
} | ||
``` | ||
|
||
## Uso fuera de un contexto de inyección | ||
|
||
La función `injectActiveElement` acepta un parámetro `Injector` opcional, lo que permite su uso fuera de un contexto de inyección. | ||
|
||
```ts | ||
@Component() | ||
export class ExampleComponent implements OnInit { | ||
private readonly injector = inject(Injector); | ||
|
||
ngOnInit() { | ||
const activeElement$ = injectActiveElement(this.injector); | ||
} | ||
} | ||
``` | ||
|
||
## API | ||
|
||
### Inputs | ||
|
||
- `injector?: Injector` - Opcional. Permite usar la función fuera de un contexto de inyección de Angular. | ||
|
||
### Outputs | ||
|
||
- Emite un Observable del HTMLElement activo del documento. |
82 changes: 82 additions & 0 deletions
82
docs/src/content/docs/es/utilities/Injectors/assert-injector.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
--- | ||
title: assertInjector | ||
description: Una utilidad de Angular para afirmar que una función se invoca en un contexto de inyección y devolver el Injector garantizado. | ||
badge: stable | ||
contributor: chau-tran | ||
--- | ||
|
||
`assertInjector` es una extensión de [`assertInInjectionContext`](https://angular.io/api/core/assertInInjectionContext) que acepta una `Function` y un `Injector` personalizado opcional. | ||
|
||
`assertInjector` afirmará que la `Function` se invoque en un [Contexto de Inyección](https://angular.io/guide/dependency-injection-context) y devolverá un `Injector` **garantizado** ya sea el _personalizado_ que se pasa o el _predeterminado_. | ||
|
||
```ts | ||
import { assertInjector } from 'ngxtension/assert-injector'; | ||
``` | ||
|
||
## Uso | ||
|
||
`assertInjector` se usa principalmente para las funciones de inyección personalizadas (CIF) o funciones abstractas que pueden depender de un Contexto de Inyección (como: `effect()` o `takeUntilDestroyed()`). | ||
|
||
```ts | ||
export function toSignal<T>(observable: Observable<T>, injector?: Injector): Signal<T> { | ||
injector = assertInjector(toSignal, injector); | ||
return runInInjectionContext(injector, () => { | ||
const source = signal<T>(undefined!); | ||
|
||
effect((onCleanup) => { | ||
const sub = observable.subscribe((value) => { | ||
source.set(value); | ||
}); | ||
onCleanup(() => sub.unsubscribe()); | ||
}); | ||
|
||
return source.asReadonly(); | ||
}); | ||
} | ||
``` | ||
|
||
## Afirmar y ejecutar | ||
|
||
`assertInjector` también puede aceptar un `runner` que es una función que se invocará en el contexto de inyección del `Injector` garantizado que afirma. Este uso acorta el CIF al no tener que llamar explícitamente a `runInInjectionContext`. | ||
|
||
```ts | ||
export function toSignal<T>(observable: Observable<T>, injector?: Injector): Signal<T> { | ||
return assertInjector(toSignal, injector, () => { | ||
const source = signal<T>(undefined!); | ||
|
||
effect((onCleanup) => { | ||
const sub = observable.subscribe((value) => { | ||
source.set(value); | ||
}); | ||
onCleanup(() => sub.unsubscribe()); | ||
}); | ||
|
||
return source.asReadonly(); | ||
}); | ||
} | ||
``` | ||
|
||
### Recuperar el `Injector` afirmado | ||
|
||
Como el `runner` se invoca con el contexto del `Injector` afirmado, podemos recuperar _ese_ `Injector` con `inject(Injector)` en el cuerpo del `runner`. Por ejemplo, un `effect()` anidado podría necesitar el `Injector`. | ||
|
||
```ts | ||
export function injectFoo(injector?: Injector) { | ||
return assertInjector(injectFoo, injector, () => { | ||
const assertedInjector = inject(Injector); | ||
|
||
// 👇 el efecto externo se ejecuta automáticamente en el Contexto de Inyección | ||
effect(() => { | ||
/* hacer algo para el efecto externo */ | ||
effect( | ||
() => { | ||
/* hacer algo para el efecto interno */ | ||
}, | ||
{ injector: assertedInjector }, | ||
); | ||
}); | ||
|
||
return 'foo'; | ||
}); | ||
} | ||
``` |
99 changes: 99 additions & 0 deletions
99
docs/src/content/docs/es/utilities/Injectors/auto-effect.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,99 @@ | ||
--- | ||
title: injectAutoEffect | ||
description: Una utilidad de Angular para crear un Effect auto-alambrado. | ||
badge: stable | ||
contributor: chau-tran | ||
--- | ||
|
||
`injectAutoEffect` es una CIF que devuelve un `Effect` _auto-alambrado_, por tanto el nombre `auto-effect`. Este `Effect` se puede usar en lugares que no tienen un Contexto de Inyección **implícito** como `ngOnInit` o `afterNextRender`. | ||
|
||
```ts | ||
import { injectAutoEffect } from 'ngxtension/auto-effect'; | ||
``` | ||
|
||
## Uso | ||
|
||
```ts | ||
@Component() | ||
export class MyComponent { | ||
@Input({ required: true }) data!: Signal<Data>; | ||
|
||
private autoEffect = injectAutoEffect(); | ||
|
||
constructor() { | ||
// Esto NO FUNCIONARÁ porque la entrada `data` aún no se ha resuelto | ||
effect(() => { | ||
console.log(this.data()); | ||
}); | ||
} | ||
|
||
ngOnInit() { | ||
// `data` Input no se resuelve hasta que se invoca `ngOnInit` | ||
this.autoEffect(() => { | ||
console.log(this.data()); | ||
}); | ||
} | ||
} | ||
``` | ||
|
||
### Función de limpieza | ||
|
||
Un `effect()` normal puede opcionalmente invocar el argumento `onCleanup` para ejecutar alguna lógica de limpieza cada vez que se invoca el `Effect`. | ||
|
||
```ts | ||
effect((onCleanup) => { | ||
const sub = interval(1000).subscribe(); | ||
onCleanup(() => sub.unsubscribe()); | ||
}); | ||
``` | ||
|
||
`injectAutoEffect()` permite a los consumidores **devolver** un `CleanUpFn` en su lugar. Esto es puramente preferencia y no tiene ningún efecto | ||
en el rendimiento de `effect()` | ||
|
||
```ts | ||
const autoEffect = injectAutoEffect(); | ||
autoEffect(() => { | ||
const sub = interval(1000).subscribe(): | ||
return () => sub.unsubscribe(); | ||
}) | ||
``` | ||
|
||
### Efecto Anidado | ||
|
||
Para un `effect` normal, siempre necesitamos pasar el `Injector` al segundo parámetro de `effect()` anidado. | ||
|
||
```ts | ||
effect((onCleanup) => { | ||
const innerEffectRef = effect( | ||
() => { | ||
/* lógica de efecto interno */ | ||
}, | ||
{ manualCleanup: true, injector: injector }, | ||
); | ||
onCleanup(() => innerEffectRef.destroy()); | ||
}); | ||
``` | ||
|
||
Con `injectAutoEffect()`, `autoEffect` siempre se invocará con el `Injector` inicial (donde invocamos `injectAutoEffect()`). | ||
|
||
```ts | ||
const autoEffect = injectAutoEffect(); | ||
autoEffect(() => { | ||
const innerEffectRef = autoEffect( | ||
() => { | ||
/* lógica de efecto interno */ | ||
}, | ||
{ manualCleanup: true }, | ||
); | ||
return () => innerEffectRef.destroy(); | ||
}); | ||
``` | ||
|
||
Opcionalmente, el callback `autoEffect` expone el `Injector` para que los consumidores puedan usarlo si es necesario.. | ||
|
||
```ts | ||
const autoEffect = injectAutoEffect(); | ||
autoEffect((injector) => { | ||
/* do something */ | ||
}); | ||
``` |
Oops, something went wrong.