Comment supprimer / remplacer la balise de sélection du composant angular2 de HTML

Je commence à utiliser angular2 (version 2.0.0-alpha.46), je crée quelques composants, lors de la création du composant angular2 avec le code ci-dessous

Manuscrit

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>

Cela fonctionne bien, mais quand je fais un élément d'inspection, je peux voir une étiquette générée comme

Output HTML

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

Problème

Il conserve la <my-component> dans le HTML, et certains de mes CSS ne fonctionnent pas comme prévu.

Question

Donc, leur façon de supprimer la balise <my-component> ? Similaire à angular 1.x (remplacer: true dans la directive).

Toute aide serait appréciée..!

Le remplacement a été obsolète dans AngularJS 1.x selon https://github.com/angular/angular/issues/3866 car il ne semblait pas être une bonne idée.

En tant que solution de contournement, vous pouvez utiliser un sélecteur d'attributs dans votre composant comme

 selector: '[myComponent]'

Et ensuite utilisez-le comme

 <div myComponent>Hello My component</div>

Ou [my-component] , puis utilisez-le comme <div my-component>Hello My component</div> mais AFAIk camelCase est maintenant préféré dans Angular2.

Pour citer le document Angular 1 to Angular 2 Upgrade Strategy :

Les directives qui remplacent leur élément hôte (remplacer: les directives réelles dans Angular 1) ne sont pas prises en charge dans Angular 2. Dans de nombreux cas, ces directives peuvent être mises à niveau vers des directives de composants habituels.

En fait, cela dépend de ce que vous voulez faire et vous devez être conscient que Angular2 prend en charge plusieurs choses:

Directives d'attributs – voir https://angular.io/docs/ts/latest/guide/attribute-directives.html
Directives structurelles – voir https://angular.io/docs/ts/latest/guide/structural-directives.html

Selon ce que vous voulez faire, vous pouvez choisir différentes approches. Pour votre échantillon simple, il semble que la solution @ Günter soit la meilleure 😉