javascript - span - Eliminar/reemplazar la etiqueta del selector de un componente de HTML

obtener el texto de un elemento con javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• Elimine los selectores de elementos HTML del host creados por el componente angular 5 respuestas

Estoy comenzando con el Angular 2 (versión 2.0.0-alpha.46) y creando algunos componentes.

Al crear el componente con el siguiente código:

Mecanografiado:

import {ComponentMetadata as Component, ViewMetadata as View} from ''angular2/angular2'';

@Component({
   selector: ''my-component''
})

@View({
     template: ''<div class="myClass">Hello My component</div>''
 })

export class MyCompoent{
    constructor() {
        console.info(''My Component Mounted Successfully'');
    }
}

HTML:

<my-component></my-component>

Funciona bien, pero cuando hago el Inspect element , puedo ver una etiqueta generada de esta manera:

HTML de salida

<my-component>
    <div>Hello My component</div>
<my-component>

Problema

mantiene la etiqueta <my-component> en el HTML, y algunos de mis CSS no funcionan como se esperaba.

Pregunta

¿Hay alguna manera de eliminar la etiqueta <my-component> similar a angular 1 ( replace: true en la directiva)?

Answer 1

Para citar el documento de estrategia de actualización de Angular 1 a Angular 2 :

Las directivas que reemplazan su elemento host (replace: directivas verdaderas en Angular 1) no son compatibles con Angular 2. En muchos casos, estas directivas se pueden actualizar a directivas de componentes regulares.

De hecho, depende de lo que quieras hacer y debes tener en cuenta que Angular2 admite varias cosas:

• Directivas de atributos : consulte https://angular.io/guide/attribute-directives
• Directivas estructurales : consulte https://angular.io/guide/structural-directives

De acuerdo con lo que desea hacer, puede elegir diferentes enfoques. Para su muestra simple, parece que la solución @ Günter es la mejor ;-)

Answer 2

Reemplazar fue desaprobado en AngularJS 1.x de acuerdo con https://github.com/angular/angular/issues/3866 porque parecía no ser una buena idea.

Como solución alternativa, puede usar un selector de atributos en su componente como

selector: ''[my-component]''

selector: ''[myComponent]''

y luego úsalo como

<div my-component>Hello My component</div>

<div myComponent>Hello My component</div>

insinuación

Los selectores de directivas deben ser camelCase en lugar de serpientes. Snake-case solo se usa para los selectores de elementos, porque - es necesario para los elementos personalizados. Angular no depende de que los componentes sean elementos personalizados, pero de todos modos se considera una buena práctica cumplir con esta regla. Angular funciona bien con los atributos de camelCase y los usa con todas las directivas ( *ngFor , ngModel , ...), y también lo sugiere la guía de estilo Angular.