Angular 7+: рендеринг компонента без контейнера HTML элемент (мешает Bootstrap стиль) - PullRequest
Новая
       8

Angular 7+: рендеринг компонента без контейнера HTML элемент (мешает Bootstrap стиль)

0 голосов
/ 19 марта 2020

Довольно простая проблема, я думаю. Для Bootstrap требуется HTML для правильной работы его системы сетки. Вот очень упрощенный общий пример: 

<div class="row">
  <div class="col">
    Nicely-formatted!
  </div>
</div>

Проблема в том, что если я вытащу эту внутреннюю часть в отдельный компонент Angular, она добавит контейнер-обертку, который отбрасывает стилизацию Bootstrap и портит макет целиком:

Источник HTML: 

<div class="row">
  <app-my-component></app-my-component>
</div>

Мой компонент HTML: 

<div class="col">
  Nicely-formatted!
</div>

ПРИМЕЧАНИЕ : I не может переместить col div вне компонента или переместить row внутри компонента. Строки принадлежат родительскому компоненту (и сильно отличаются / et c.), А столбцы - экземплярам дочернего компонента.

Результирующий HTML при визуализации (и теперь он, к сожалению, лежит, как он больше не отформатирован): 

<div class="row">
  <app-my-component>
    <div class="col">
      Nicely-formatted!
    </div>
  </app-my-component>
</div>

Есть ли способ указать Angular в не визуализировать тег <app-my-component>? Я бы предпочел, чтобы он просто вставил HTML напрямую, что решило бы мою проблему.

Этот похожий вопрос не получил никакой любви, после того как большинство комментариев / ответов касались не того . Помогите решить нашу коллективную проблему! :) (И если рендеринг Angular компонентов без тега-обертки невозможен, я открыт для предложений!)

Я бы не стал втиснуть в хакерские стили go против Bootstrap обычного стиля или удалите подкомпоненты (я повторно использую их, и повторение их кода в HTML было бы довольно болезненно).

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

1 Ответ

0 голосов
/ 19 марта 2020

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

Вместо того, чтобы использовать <div> для класса row, я помещаю это непосредственно в свой компонент HTML, и никакие корректировки не требуются: 

<app-my-component class="row"></app-my-component>

Окончательный результат HTML читается следующим образом (и содержимое еще раз говорит правду): 

<app-my-component class="row">
  <div class="col">
    Nicely-formatted!
  </div>
</app-my-component>

Решение сводится к тому, чтобы "использовать компонент в качестве класса контейнера для Bootstrap вместо тега div. " Это позволяет мне правильно хранить row (и другие логики c) вне дочернего компонента, а также позволяет сохранять то, что я помещаю внутри дочернего компонента внутри.

Насколько я могу судить, теги Angular будут отображать inline по умолчанию (в отличие от block для тегов <div>). Применение класса row, конечно, меняет его на flex, как при применении к другим тегам контейнера, и, похоже, ведет себя иначе, как <div class="row"> (хорошая вещь).

Для тех, кто ищет «мне нужна прямая CSS иерархия для работы макета», это должно вам помочь.

...