angularjs - parametros - ¿Se puede usar un componente angular 2 con un selector de atributo?

viewchild angular 4 example

Question

Actualmente tenemos un pequeño proyecto Angular 1 existente que se utiliza en un entorno local de Sharepoint 2013. Para una gran parte de nuestro contenido, usamos páginas de publicación en el entorno de Sharepoint.

Con Angular 1, podríamos definir que las directivas se limiten a: coincidir con el nombre de atributo, el nombre de etiqueta, los comentarios o el nombre de clase . La mayoría de las directivas que creamos fueron atributo o nombre de etiqueta. La preferencia hubiera sido el nombre de la etiqueta, pero la plataforma de publicación en Sharepoint elimina los elementos desconocidos . Eso significa que nos quedamos con el uso de atributos para llevar nuestras directivas a las páginas de publicación. Sin embargo, con Angular 2, solo he visto componentes implementados por nombre de etiqueta.

¿Es posible con Angular 2 usar nombres de atributos para usar nuestros componentes? Este es un requisito para nosotros debido a las restricciones en la plataforma de publicación de Sharepoint.

Gracias.

Answer 1

Absolutamente. Esencialmente, esto es solo un selector de CSS, así que si necesita usar un atributo, simplemente haga esto:

@Component({
    selector: "my-tag[with-my-attribute]"
})

Answer 2

Propiedad de selector del soporte de decorador @Component, selector de elemento, selector de atributo y selector de clase:

1. Selector de elementos:

@Component({
 selector: ''custom-element-name''
})

Uso: <app-servers></app-servers>

2. Selector de atributos:

@Component({
 selector: ''[custom-element-name]''
})

Uso: <div app-servers></div>

3. Selector de clase:

@Component({
 selector: ''.custom-element-name''
})

Uso: <div class="app-servers"></div>

Nota: Angular 2 no admite id y pseudo selectores

Answer 3

Sí, de acuerdo con este https://angular.io/docs/ts/latest/guide/cheatsheet.html (los componentes y las directivas son muy similares en general). En lugar de utilizar el selector de elementos:

selector: ''custom-element-name''

Utilizar:

selector: ''[custom-attribute-name]''

Y en la plantilla de tu componente principal:

<div custom-attribute-name></div>

Answer 4

Sí, la propiedad selector del decorador @Component es un selector CSS (o un subconjunto de):

selector : ''.cool-button:not(a)''

Especifica un selector de CSS que identifica esta directiva dentro de una plantilla. Los selectores admitidos incluyen element , [attribute] , .class y :not() .
No admite selectores de relación padre-hijo.

_{Fuente: @Component angular / Configuración de directiva , que @Component hereda.}

De esa manera puede usar [name-of-the-attribute] (a saber, el selector de atributo CSS ), como:

@Component({
    selector: "[other-attr]",
    ...
})
export class OtherAttrComponent {

Se muestra demoledor aquí .

La forma habitual es el selector de tipo CSS (elemento AKA o etiqueta) :

@Component({
    selector: "some-tag",
    ...
})

Y coincide con una etiqueta con el nombre de some-tag .

Incluso puede tener un componente que coincida con una etiqueta o un atributo :

@Component({
    selector: "other-both,[other-both]",
    template: `this is other-both ({{ value }})`
})
export class OtherBothComponent {

Demostrador plunker contiene ejemplos de los tres.

¿Se admite [attributeName="attributeValue"] ?

Sí. Pero cuidado con las citas. En la implementación actual, el selector [attributeName="attributeValue"] realidad coincide con <sometag attributeName=''"attributeValue"''> , así que haga una prueba antes de comprometerse con este enfoque.