Skip to content

Commit ca450f6

Browse files
ricardochlSplaktar
ricardochl
authored and
Splaktar
committed
translate: translations for component selectors guide
Fixes #21
1 parent acfa6af commit ca450f6

File tree

3 files changed

+215
-68
lines changed

3 files changed

+215
-68
lines changed

‎adev-es/src/app/sub-navigation-data.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
9595
contentPath: 'guide/components/importing',
9696
},
9797
{
98-
label: 'Selectors',
98+
label: 'Selectores',
9999
path: 'guide/components/selectors',
100100
contentPath: 'guide/components/selectors',
101101
},

‎adev-es/src/content/guide/components/selectors.en.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
# Component selectors
2+
3+
TIP: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
4+
5+
Every component defines
6+
a [CSS selector](https://developer.mozilla.org/docs/Web/CSS/CSS_selectors) that determines how
7+
the component is used:
8+
9+
<docs-code language="angular-ts" highlight="[2]">
10+
@Component({
11+
selector: 'profile-photo',
12+
...
13+
})
14+
export class ProfilePhoto { }
15+
</docs-code>
16+
17+
You use a component by creating a matching HTML element in the templates of _other_ components:
18+
19+
<docs-code language="angular-ts" highlight="[3]">
20+
@Component({
21+
template: `
22+
<profile-photo />
23+
<button>Upload a new profile photo</button>`,
24+
...,
25+
})
26+
export class UserProfile { }
27+
</docs-code>
28+
29+
**Angular matches selectors statically at compile-time**. Changing the DOM at run-time, either via
30+
Angular bindings or with DOM APIs, does not affect the components rendered.
31+
32+
**An element can match exactly one component selector.** If multiple component selectors match a
33+
single element, Angular reports an error.
34+
35+
**Component selectors are case-sensitive.**
36+
37+
## Types of selectors
38+
39+
Angular supports a limited subset
40+
of [basic CSS selector types](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) in
41+
component selectors:
42+
43+
| **Selector type** | **Description** | **Examples** |
44+
| ------------------ | --------------------------------------------------------------------------------------------------------------- | ----------------------------- |
45+
| Type selector | Matches elements based on their HTML tag name, or node name. | `profile-photo` |
46+
| Attribute selector | Matches elements based on the presence of an HTML attribute and, optionally, an exact value for that attribute. | `[dropzone]` `[type="reset"]` |
47+
| Class selector | Matches elements based on the presence of a CSS class. | `.menu-item` |
48+
49+
For attribute values, Angular supports matching an exact attribute value with the equals (`=`)
50+
operator. Angular does not support other attribute value operators.
51+
52+
Angular component selectors do not support combinators, including
53+
the [descendant combinator](https://developer.mozilla.org/docs/Web/CSS/Descendant_combinator)
54+
or [child combinator](https://developer.mozilla.org/docs/Web/CSS/Child_combinator).
55+
56+
Angular component selectors do not support
57+
specifying [namespaces](https://developer.mozilla.org/docs/Web/SVG/Namespaces_Crash_Course).
58+
59+
### The `:not` pseudo-class
60+
61+
Angular supports [the `:not` pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:not).
62+
You can append this pseudo-class to any other selector to narrow which elements a component's
63+
selector matches. For example, you could define a `[dropzone]` attribute selector and prevent
64+
matching `textarea` elements:
65+
66+
<docs-code language="angular-ts" highlight="[2]">
67+
@Component({
68+
selector: '[dropzone]:not(textarea)',
69+
...
70+
})
71+
export class DropZone { }
72+
</docs-code>
73+
74+
Angular does not support any other pseudo-classes or pseudo-elements in component selectors.
75+
76+
### Combining selectors
77+
78+
You can combine multiple selectors by concatenating them. For example, you can match `<button>`
79+
elements that specify `type="reset"`:
80+
81+
<docs-code language="angular-ts" highlight="[2]">
82+
@Component({
83+
selector: 'button[type="reset"]',
84+
...
85+
})
86+
export class ResetButton { }
87+
</docs-code>
88+
89+
You can also define multiple selectors with a comma-separated list:
90+
91+
<docs-code language="angular-ts" highlight="[2]">
92+
@Component({
93+
selector: 'drop-zone, [dropzone]',
94+
...
95+
})
96+
export class DropZone { }
97+
</docs-code>
98+
99+
Angular creates a component for each element that matches _any_ of the selectors in the list.
100+
101+
## Choosing a selector
102+
103+
The vast majority of components should use a custom element name as their selector. All custom
104+
element names should include a hyphen as described
105+
by [the HTML specification](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name).
106+
By default, Angular reports an error if it encounters a custom tag name that does not match any
107+
available components, preventing bugs due to mistyped component names.
108+
109+
See [Advanced component configuration](guide/components/advanced-configuration) for details on
110+
using [native custom elements](https://developer.mozilla.org/docs/Web/Web_Components) in
111+
Angular templates.
112+
113+
### Selector prefixes
114+
115+
The Angular team recommends using a short, consistent prefix for all the custom components
116+
defined inside your project. For example, if you were to build YouTube with Angular, you might
117+
prefix your components with `yt-`, with components like `yt-menu`, `yt-player`, etc. Namespacing
118+
your selectors like this makes it immediately clear where a particular component comes from. By
119+
default, the Angular CLI uses `app-`.
120+
121+
Angular uses the `ng` selector prefix for its own framework APIs. Never use `ng` as a selector
122+
prefix for your own custom components.
123+
124+
### When to use an attribute selector
125+
126+
You should consider an attribute selector when you want to create a component on a standard native
127+
element. For example, if you want to create a custom button component, you can take advantage of the
128+
standard `<button>` element by using an attribute selector:
129+
130+
<docs-code language="angular-ts" highlight="[2]">
131+
@Component({
132+
selector: 'button[yt-upload]',
133+
...
134+
})
135+
export class YouTubeUploadButton { }
136+
</docs-code>
137+
138+
This approach allows consumers of the component to directly use all the element's standard APIs
139+
without extra work. This is especially valuable for ARIA attributes such as `aria-label`.
140+
141+
Angular does not report errors when it encounters custom attributes that don't match an available
142+
component. When using components with attribute selectors, consumers may forget to import the
143+
component or its NgModule, resulting in the component not rendering.
144+
See [Importing and using components](guide/components/importing) for more information.
145+
146+
Components that define attribute selectors should use lowercase, dash-case attributes. You can
147+
follow the same prefixing recommendation described above.

‎adev-es/src/content/guide/components/selectors.md‎

Lines changed: 67 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Component selectors
1+
# Selectores de Componentes
22

3-
TIP: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
3+
CONSEJO: Esta guía asume que ya has leído la [Guía de Fundamentos](essentials). Léela primero si eres nuevo en Angular.
44

5-
Every component defines
6-
a [CSS selector](https://developer.mozilla.org/docs/Web/CSS/CSS_selectors) that determines how
7-
the component is used:
5+
Cada componente define
6+
un [selector CSS](https://developer.mozilla.org/es/docs/Web/CSS/CSS_selectors) que determina cómo
7+
se usa el componente:
88

99
<docs-code language="angular-ts" highlight="[2]">
1010
@Component({
@@ -14,54 +14,54 @@ the component is used:
1414
export class ProfilePhoto { }
1515
</docs-code>
1616

17-
You use a component by creating a matching HTML element in the templates of _other_ components:
17+
Para usar un componente, creas un elemento HTML que coincida con su selector en las plantillas de _otros_ componentes:
1818

1919
<docs-code language="angular-ts" highlight="[3]">
2020
@Component({
2121
template: `
2222
<profile-photo />
23-
<button>Upload a new profile photo</button>`,
23+
<button>Subir una nueva foto de perfil</button>`,
2424
...,
2525
})
2626
export class UserProfile { }
2727
</docs-code>
2828

29-
**Angular matches selectors statically at compile-time**. Changing the DOM at run-time, either via
30-
Angular bindings or with DOM APIs, does not affect the components rendered.
29+
**Angular hace coincidir los selectores estáticamente en tiempo de compilación**. Cambiar el DOM en tiempo de ejecución, ya sea mediante
30+
enlaces de Angular o con APIs del DOM, no afecta los componentes renderizados.
3131

32-
**An element can match exactly one component selector.** If multiple component selectors match a
33-
single element, Angular reports an error.
32+
**Un elemento puede coincidir exactamente con un selector de componente.** Si múltiples selectores de componente coinciden con un
33+
solo elemento, Angular genera un error.
3434

35-
**Component selectors are case-sensitive.**
35+
**Los selectores de componente distinguen entre mayúsculas y minúsculas.**
3636

37-
## Types of selectors
37+
## Tipos de selectores
3838

39-
Angular supports a limited subset
40-
of [basic CSS selector types](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) in
41-
component selectors:
39+
Angular soporta un subconjunto limitado
40+
de [tipos de selectores CSS básicos](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) en
41+
selectores de componente:
4242

43-
| **Selector type** | **Description** | **Examples** |
43+
| **Tipo de selector** | **Descripción** | **Ejemplos** |
4444
| ------------------ | --------------------------------------------------------------------------------------------------------------- | ----------------------------- |
45-
| Type selector | Matches elements based on their HTML tag name, or node name. | `profile-photo` |
46-
| Attribute selector | Matches elements based on the presence of an HTML attribute and, optionally, an exact value for that attribute. | `[dropzone]` `[type="reset"]` |
47-
| Class selector | Matches elements based on the presence of a CSS class. | `.menu-item` |
45+
| Tipo de selector | Coincide con elementos basándose en su nombre de etiqueta HTML, o nombre de nodo. | `profile-photo` |
46+
| Selector de atributo | Coincide con elementos basándose en la presencia de un atributo HTML y, opcionalmente, un valor exacto para ese atributo. | `[dropzone]` `[type="reset"]` |
47+
| Selector de clase | Coincide con elementos basándose en la presencia de una clase CSS. | `.menu-item` |
4848

49-
For attribute values, Angular supports matching an exact attribute value with the equals (`=`)
50-
operator. Angular does not support other attribute value operators.
49+
Para valores de atributos, Angular soporta la coincidencia con un valor de atributo exacto usando el operador
50+
igual (`=`). Angular no soporta otros operadores de valores de atributos.
5151

52-
Angular component selectors do not support combinators, including
53-
the [descendant combinator](https://developer.mozilla.org/docs/Web/CSS/Descendant_combinator)
54-
or [child combinator](https://developer.mozilla.org/docs/Web/CSS/Child_combinator).
52+
Los selectores de componente de Angular no soportan combinadores, incluyendo
53+
el [combinador descendiente](https://developer.mozilla.org/es/docs/Web/CSS/Descendant_combinator)
54+
o [combinador hijo](https://developer.mozilla.org/es/docs/Web/CSS/Child_combinator).
5555

56-
Angular component selectors do not support
57-
specifying [namespaces](https://developer.mozilla.org/docs/Web/SVG/Namespaces_Crash_Course).
56+
Los selectores de componente de Angular no soportan
57+
especificar [espacios de nombres](https://developer.mozilla.org/docs/Web/SVG/Namespaces_Crash_Course).
5858

59-
### The `:not` pseudo-class
59+
### La pseudo-clase `:not`
6060

61-
Angular supports [the `:not` pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:not).
62-
You can append this pseudo-class to any other selector to narrow which elements a component's
63-
selector matches. For example, you could define a `[dropzone]` attribute selector and prevent
64-
matching `textarea` elements:
61+
Angular soporta [la pseudo-clase `:not`](https://developer.mozilla.org/es/docs/Web/CSS/:not).
62+
Puedes agregar esta pseudo-clase a cualquier otro selector para reducir qué elementos coincide
63+
el selector de un componente. Por ejemplo, podrías definir un selector de atributo `[dropzone]` y prevenir
64+
que coincida con elementos `textarea`:
6565

6666
<docs-code language="angular-ts" highlight="[2]">
6767
@Component({
@@ -71,12 +71,12 @@ matching `textarea` elements:
7171
export class DropZone { }
7272
</docs-code>
7373

74-
Angular does not support any other pseudo-classes or pseudo-elements in component selectors.
74+
Angular no soporta ninguna otra pseudo-clase o pseudo-elemento en selectores de componente.
7575

76-
### Combining selectors
76+
### Combinando selectores
7777

78-
You can combine multiple selectors by concatenating them. For example, you can match `<button>`
79-
elements that specify `type="reset"`:
78+
Puedes combinar múltiples selectores concatenándolos. Por ejemplo, puedes hacer coincidir elementos `<button>`
79+
que especifiquen `type="reset"`:
8080

8181
<docs-code language="angular-ts" highlight="[2]">
8282
@Component({
@@ -86,7 +86,7 @@ elements that specify `type="reset"`:
8686
export class ResetButton { }
8787
</docs-code>
8888

89-
You can also define multiple selectors with a comma-separated list:
89+
También puedes definir múltiples selectores con una lista separada por comas:
9090

9191
<docs-code language="angular-ts" highlight="[2]">
9292
@Component({
@@ -96,36 +96,36 @@ You can also define multiple selectors with a comma-separated list:
9696
export class DropZone { }
9797
</docs-code>
9898

99-
Angular creates a component for each element that matches _any_ of the selectors in the list.
99+
Angular crea un componente para cada elemento que coincide con _cualquiera_ de los selectores en la lista.
100100

101-
## Choosing a selector
101+
## Eligiendo un selector
102102

103-
The vast majority of components should use a custom element name as their selector. All custom
104-
element names should include a hyphen as described
105-
by [the HTML specification](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name).
106-
By default, Angular reports an error if it encounters a custom tag name that does not match any
107-
available components, preventing bugs due to mistyped component names.
103+
La gran mayoría de componentes deberían usar un nombre de elemento personalizado como su selector. Todos los nombres de
104+
elementos personalizados deberían incluir un guión como se describe
105+
en [la especificación HTML](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name).
106+
Por defecto, Angular genera un error si encuentra un nombre de etiqueta personalizada que no coincide con ningún
107+
componente disponible, previniendo errores debido a nombres de componente mal escritos.
108108

109-
See [Advanced component configuration](guide/components/advanced-configuration) for details on
110-
using [native custom elements](https://developer.mozilla.org/docs/Web/Web_Components) in
111-
Angular templates.
109+
Ver [Configuración avanzada de componentes](guide/components/advanced-configuration) para detalles sobre
110+
usar [elementos personalizados nativos](https://developer.mozilla.org/es/docs/Web/API/Web_components) en
111+
plantillas de Angular.
112112

113-
### Selector prefixes
113+
### Prefijos de selectores
114114

115-
The Angular team recommends using a short, consistent prefix for all the custom components
116-
defined inside your project. For example, if you were to build YouTube with Angular, you might
117-
prefix your components with `yt-`, with components like `yt-menu`, `yt-player`, etc. Namespacing
118-
your selectors like this makes it immediately clear where a particular component comes from. By
119-
default, the Angular CLI uses `app-`.
115+
El equipo de Angular recomienda usar un prefijo corto y consistente para todos los componentes personalizados
116+
definidos dentro de tu proyecto. Por ejemplo, si fueras a construir YouTube con Angular, podrías
117+
prefijar tus componentes con `yt-`, con componentes como `yt-menu`, `yt-player`, etc. Hacer espacio de nombres
118+
a tus selectores de esta manera hace inmediatamente claro de dónde viene un componente particular. Por
119+
defecto, el Angular CLI usa `app-`.
120120

121-
Angular uses the `ng` selector prefix for its own framework APIs. Never use `ng` as a selector
122-
prefix for your own custom components.
121+
Angular usa el prefijo de selector `ng` para sus propias APIs del framework. Nunca uses `ng` como prefijo de
122+
selector para tus propios componentes personalizados.
123123

124-
### When to use an attribute selector
124+
### Cuándo usar un selector de atributo
125125

126-
You should consider an attribute selector when you want to create a component on a standard native
127-
element. For example, if you want to create a custom button component, you can take advantage of the
128-
standard `<button>` element by using an attribute selector:
126+
Deberías considerar un selector de atributo cuando quieras crear un componente en un elemento nativo estándar.
127+
Por ejemplo, si quieres crear un componente de botón personalizado, puedes aprovechar el
128+
elemento `<button>` estándar usando un selector de atributo:
129129

130130
<docs-code language="angular-ts" highlight="[2]">
131131
@Component({
@@ -135,13 +135,13 @@ standard `<button>` element by using an attribute selector:
135135
export class YouTubeUploadButton { }
136136
</docs-code>
137137

138-
This approach allows consumers of the component to directly use all the element's standard APIs
139-
without extra work. This is especially valuable for ARIA attributes such as `aria-label`.
138+
Este enfoque permite a los consumidores del componente usar directamente todas las APIs estándar del elemento
139+
sin trabajo adicional. Esto es especialmente valioso para atributos ARIA como `aria-label`.
140140

141-
Angular does not report errors when it encounters custom attributes that don't match an available
142-
component. When using components with attribute selectors, consumers may forget to import the
143-
component or its NgModule, resulting in the component not rendering.
144-
See [Importing and using components](guide/components/importing) for more information.
141+
Angular no genera errores cuando encuentra atributos personalizados que no coinciden con un componente
142+
disponible. Al usar componentes con selectores de atributo, los consumidores pueden olvidar importar el
143+
componente o su NgModule, resultando en que el componente no se renderice.
144+
Ver [Importando y usando componentes](guide/components/importing) para más información.
145145

146-
Components that define attribute selectors should use lowercase, dash-case attributes. You can
147-
follow the same prefixing recommendation described above.
146+
Los componentes que definen selectores de atributo deberían usar atributos en minúsculas y con guiones (dash-case).
147+
Puedes seguir la misma recomendación de prefijos descrita arriba.

0 commit comments

Comments
 (0)