Удалить/заменить тег селектора компонента из HTML

Я начинаю с Angular 2 (версия 2.0.0-alpha.46) и создаю несколько компонентов.

При создании компонента с кодом ниже:

Машинопись:

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>

Он работает нормально, но когда я делаю Inspect element, я вижу тег, сгенерированный так:

Выходной HTML

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

проблема

он сохраняет <my-component> в HTML, и некоторые из моих CSS не работают должным образом.

Вопрос

Есть ли способ удалить <my-component> похожий на angular 1 (replace: true в директиве)?

Ответ 1

Заменить было запрещено в AngularJS 1.x в соответствии с https://github.com/angular/angular/issues/3866, потому что казалось, что это не очень хорошая идея.

В качестве обходного пути вы можете использовать селектор атрибута в вашем компоненте, как

selector: '[my-component]'

selector: '[myComponent]'

а затем использовать его как

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

<div myComponent>Hello My component</div>

намек

Директивные селекторы должны быть camelCase вместо змеиного футляра. Snake-case используется только для селекторов элементов, потому что - требуется для пользовательских элементов. Angular не зависит от того, являются ли компоненты пользовательскими элементами, но в любом случае рекомендуется соблюдать это правило. Angular прекрасно работает с атрибутами camelCase и использует их со всеми директивами (*ngFor, ngModel ,...), а также предлагается в руководстве по стилю Angular.

Ответ 2

Чтобы процитировать документацию от Upgrade 1 до Angular 2:

Директивы, которые заменяют их хост-элемент (replace: true в Angular 1), не поддерживаются в Angular 2. Во многих случаях эти директивы могут быть обновлены до обычных директив компонентов.

На самом деле, это зависит от того, что вы хотите сделать, и вы должны знать, что Angular2 поддерживает несколько вещей:

Директивы атрибутов - см. Https://angular.io/guide/attribute-directives
Структурные директивы - см. Https://angular.io/guide/structural-directives

В зависимости от того, что вы хотите сделать, вы можете выбрать разные подходы. Для вашего простого примера кажется, что решение @Günter лучше ;-)