Замените компонент своим содержимым - angular 2

Я ищу способ иметь компонент, который отображается только с его содержимым. Например, учитывая компонент:

@Component({selector: 'my-cmp', template: '<div> my-cmp </div>'})
class MyComponent {
}

рендеринг его с помощью angular2 добавит следующее в DOM:

<my-cmp>
    <div> my-cmp </div>
</my-cmp>

В то время как я хочу найти способ сделать это непосредственно как:

<div> my-cmp </div>

К сожалению, поскольку angular 2 относительно новый (просто пошел бета-версия) - Google не так полезен, не говоря уже о том, что недостает текущей документации..

Ответы

Ответ 1

Согласно документации angular 1.x

Замените сам элемент директивы (если replace is true - РЕКОМЕНДУЕТСЯ).

Итак, я думаю, что эта функция не будет доступна angular 2

Ответ 2

Относительно того, что может быть достигнуто с помощью селектора атрибутов

camelCasing является обязательным для атрибутов, поскольку alpha.52

@Component({
     selector: '[myCmp]', //attribute selector
     template: 'my-cmp'
})
class MyComponent {
}

И используйте это для вызова:

<div myCmp></div>

Ответ 3

Вы можете сделать что-то вроде следующего:

@Component({selector: 'div.my-cmp', template: 'my-cmp'})
class MyComponent {
}

и в вашем HTML:

 <div class="my-cmp" />

Ответ 4

Я помню, как несколько лет назад задавал аналогичный вопрос для Angularjs. Похоже, что это был консенсус, поскольку, возможно, сейчас вы, вероятно, не хотите этого делать.

Это разрывает семантику: a <video/> или <input/> не разлагается в ее содержимое. Ваши компоненты Angular тоже не должны.

Возможно, вы все еще можете достичь того, чего хотите, подумав более глубоко о своей разметке /css? Возможно, если вы воспользуетесь случаем использования, мы сможем предоставить вам альтернативу?