Удаление селекторов элементов HTML хоста, созданных угловым компонентом

В угловом 2 svg-rect является компонентом, который создает прямоугольник, как показано ниже,

              

но это не будет выведено из-за созданных специальных тегов элементов. Если tags svg-rect удалены, это делает прямой

           

В Angular 1.x существует замена: «true», которая удаляет tags директивы с помощью скомпилированного вывода. Можем ли мы реализовать то же самое в угловом2?

4 Solutions collect form web for “Удаление селекторов элементов HTML хоста, созданных угловым компонентом”

Вместо того, чтобы пытаться избавиться от элемента-хозяина, превратите его в тот, который является действительным SVG, но другим мудрым unaffecting: вместо селектора элементов

 selector: "svg-rect" 

и его соответствующий элемент в шаблоне:

 template: `.........` 

переключиться на селектор атрибутов :

 selector: "[svg-rect]" 

и добавьте этот атрибут в тег элемента группы:

 template: `.........` 

Это расширится до:

               

который является действительным SVG, который будет отображаться. Plnkr

Другой подход к удалению хоста компонента, который я использую.

Директива remove-host

 //remove the host of avatar to be rendered as svg @Directive({ selector: '[remove-host]' }) class RemoveHost { constructor(private el: ElementRef) { } //wait for the component to render completely ngOnInit() { var nativeElement: HTMLElement = this.el.nativeElement, parentElement: HTMLElement = nativeElement.parentElement; // move all children out of the element while (nativeElement.firstChild) { parentElement.insertBefore(nativeElement.firstChild, nativeElement); } // remove the empty element(the host) parentElement.removeChild(nativeElement); } } 

Используя эту директиву;

В директиве remove-host все дочерние nativeElement вставлены перед хостом, а затем удаляется элемент хоста.

Пример примера Gist
На основе варианта использования может быть несколько проблем с производительностью.

Есть еще один подход, позволяющий получить шаблон компонента из компонента.
Сначала мы создаем компонент, чей тег мы надеемся удалить из браузера (мы не пытаемся удалить тег здесь.)

 @Component({ selector: 'tl-no-tag', template: ` `, styleUrls: [] }) export class TlNoTagComponent { @ViewChild('tmp') tmp: any; value = 5; } 

Затем в шаблоне другого компонента мы пишем:

     

Тогда у нас в браузере что-то вроде этого:

  

5

Итак, мы внедрили

{{value}}

из TlNoTagComponent. будет продолжать существовать, но не будет блокировать какие-либо css или svg-thing.

Чтобы процитировать страtagsю с угловым 1 до углового 2 :

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

Бывают случаи, когда обычные директивы компонентов не будут работать, в таких случаях могут использоваться альтернативные подходы. Например, для svg см. https://github.com/mhevery/ng2-svg

  • Angular2 + http с интервалом
  • Как реализовать Modal Dialog в Angular 2 и выше
  • Установите базовый url для угловых 2 запросов HTTP
  • В RC.1 некоторые стили нельзя добавить с помощью синтаксиса привязки
  • ПРЕДУПРЕЖДЕНИЕ: очистка небезопасного значения значения стиля
  • Как я могу использовать / создать динамический шаблон для компиляции динамического компонента с угловым 2.0?
  • Как добавить шрифт-awesome в проект Angular 2 + CLI
  • Эквивалент $ compile в Angular 2
  • Точки останова в Dartium не работают
  • Каким образом можно использовать угловые2 HTTP-запросы с защитой Django CSRF?
  • Как я могу делиться данными между компонентами в Angular 2?
  • Interesting Posts

    угловое обнаружение изменений и ChangeDetectionStrategy.OnPush

    Оценка строки “3 * (4 + 2)” yield int 18

    std :: fstream буферизация против ручного буферизации (почему 10-кратное усиление с ручной буферизацией)?

    Можно ли скопировать все файлы Windows 7 с одного HD на другой и загрузиться с нового HD?

    Недостатки небольшого размера единицы размещения

    Каковы отношения между Any, AnyVal, AnyRef, Object и как они отображаются при использовании в Java-коде?

    Печать непосредственно из браузера без всплывающего windows печати

    Почему я не могу скопировать инициализацию структуры, полученной из другой структуры?

    Как работает модуль Divison

    В меню «Пуск» Windows 10 отсутствуют определенные типы ярлыков

    Почему я могу использовать auto в закрытом типе?

    Плененный портал: внешние параметры страницы всплеска?

    OpenCV Android Green Color Detection

    Как C обрабатывает целочисленные литералы с ведущими нулями, а что касается atoi?

    Excel 2007 транспонирует / объединяет несколько строк в один

    Давайте будем гением компьютера.