Есть ли способ заменить мой компонент в dom его содержимым?

В настоящее время я использую стороннюю утилиту под названием JQXDocking. Это довольно простой и понятный дизайн. Изучив это на более глубоком уровне, я решил, что страница станет громоздкой, поэтому я абстрагировал все закрепленные виджеты на пользовательские компоненты.

Однако проблема с концепцией jqxDocking заключается в том, что она ищет div и т. д. Я нарушаю дизайн, потому что вместо прямого дочернего элемента, являющегося div, это мой пользовательский компонент.

// What it was
<jqxDocking>
<div><div>title</div><div>content</div></div>
</jqxDocking>

// What it is now.
<jqxDocking>
  <my-component></my-component>
</jqxDocking>

inside my-component has the proper dom structure that jqxDocking is looking for.  So i was hoping for a way to replace in markup correctly such that the component works.

из-за этого нового слоя в DOM родительский компонент не может правильно интерпретировать мой код.

Есть ли способ создать пользовательский компонент, но заменить его шаблоном html?

Итак, если я оберну его div, он получит часть своей реализации.

<jqxDocking>
  <div class=column">
    <div class="card">
      <my-component></my-component>
    </div>
  </div>
</jqxDocking>

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

Итак, я вытаскиваю это из компонента

<jqxDocking>
  <div class="column">
    <div class="card">
      <div>Title</div>
      <my-component></my-component>
    </div>
  </div>
</jqxDocking>

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


typescript angular jqxwidgets
person Fallenreaper    schedule 28.02.2019    source источник
comment
что произойдет, если вы обернете <my-component></my-component> внутри div?   -  person Johan Swanepoel    schedule 28.02.2019
comment
Я так пробовал изначально. Это делает его перетаскиваемым, как виджет, но он не понимает название карты, которое определено в моем компоненте. Поэтому, если я буду продолжать абстрагироваться, он в конечном итоге станет <div><div>title</div><my-component></my-component></div>, но, как вы можете видеть, поскольку все имеет заголовок и все заключено в div, я подумал, что все это можно абстрагировать.   -  person Fallenreaper    schedule 28.02.2019

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы избежать появления элемента my-component в выходном HTML, вы можете определить селектор компонентов как селектор атрибутов:

selector: "[my-component]"

и установите этот атрибут для элемента контейнера в шаблоне:

<jqxDocking my-component></jqxDocking>

См. этот stackblitz для демонстрации .

person ConnorsFan    schedule 28.02.2019
comment
Как будут обрабатываться свойства Input()? Будут ли они просто применяться, как обычно, к jqxDocking, или в вашем примере к div? - person Fallenreaper; 28.02.2019
comment
Вы можете привязать их к элементу компонента контейнера, как показано в обновленный stackblitz. - person ConnorsFan; 28.02.2019
comment
ЭВРИКА. Я собираюсь проверить и очистить это еще немного, но я думаю, что это ответ, который я искал. - person Fallenreaper; 28.02.2019
comment
Это решает базовый вопрос. Единственное, что я вижу, что вызывает икоту, это то, что стили не просачиваются в компонент. Это хорошо, но родительские стили делают такие вещи, как jqx-window-content-dark, а затем стилизуются все дочерние элементы под ним. Поскольку технически содержимое по-прежнему является его собственным компонентом, CSS не будет разрешаться. Но это видимо другой вопрос - person Fallenreaper; 28.02.2019
comment
Если у вас есть контроль над jqx CSS, вы можете добавить ::ng-deep перед правилами стиля, чтобы повлиять на элементы дочернего компонента (см. этот ответ ). - person ConnorsFan; 28.02.2019