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

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

              

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

           

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

Вместо того, чтобы пытаться избавиться от элемента-хозяина, превратите его в тот, который является действительным 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 с помощью Visual Studio Code?
  • Создание и возrotation наблюдаемого из службы углового 2
  • Вложенные массивы в угловых 2 реактивных формах?
  • Интеграция дизайна материалов Lite с помощью Angular2
  • $ применить уже выполненную ошибку
  • угловая ng-init альтернатива в угловом 2
  • Как загрузить файл с помощью Angular2
  • Угловой и машинописный: не могут найти имена
  • Угловой параметр HttpClient по умолчанию и определенный тайм-аут запроса
  • Как динамически загружать внешние скрипты в Angular?
  • Как включить внешний файл js в Angular 4 и функцию вызова от углового до js
  • Давайте будем гением компьютера.