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

Question

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

Машинопись

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>

Это работает нормально, но когда я делаю элемент проверки, я вижу тег, сгенерированный как

Выходной HTML

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

проблема

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

Вопрос

Так их способ удалить тег <my-component>? похож на угловой 1.x (замените: true в директиве).

Любая помощь будет оценена..!

Answer 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 используется только для селекторов элементов, потому что - требуется для пользовательских элементов. Angular не зависит от того, являются ли компоненты пользовательскими элементами, но в любом случае рекомендуется соблюдать это правило. Angular отлично работает с атрибутами camelCase и использует их со всеми директивами (*ngFor, ngModel,...), а также предлагается в Руководстве по угловым стилям.

Answer 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 лучше;-)