объект карты меняется после помещения внутрь собственного компонента

Question

Я создал адаптивный список загрузочных карт, на которых будет отображаться информация. Карты в настоящее время создаются * ngIf внутри компонента страницы. Теперь я хочу переместить элементы карты в свой компонент. При этом форматирование меняется.

Я пытался инкапсулировать карты в их собственный ng-контейнер (который все еще работает без проблем), но это мне совсем не помогло.

Мое понимание использования компонентов заключалось в том, что он должен внедрять HTML-код, как при использовании ng-контейнера, или я упустил один важный момент?

Скриншот

Работа в одном компоненте:

<div class="container">
  <div class="row">
    <div *ngFor="let device of devices" class="col-4 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <p>some content</p>
        </div>
      </div>
    </div>
  </div>
</div>

Разбит на несколько компонентов:

Компонент страницы (список страниц):

<div class="container">
  <div class="row">
    <app-device-list-item></app-device-list-item>
    <app-device-list-item></app-device-list-item>
  </div>
</div>

Компонент устройства (элемент списка устройств):

div class="col-4 mb-4">
  <div class="card h-100">
    <div class="card-body">
      some content
    </div>
  </div>
</div>

Ожидаемый результат: устройства должны отображаться так же, как и при отображении внутри одного компонента

Фактический результат: они не отображаются одинаково (см. Скриншот)

Answer 1

Ваша окончательная разметка будет выглядеть следующим образом: содержимое компонента device-list-item обернуто в элемент <app-device-list-item>, который по умолчанию обрабатывается браузером как элемент <span>:

<div class="container">
  <div class="row">
    <app-device-list-item>
      <div class="col-4 mb-4">
        <div class="card h-100">
          <div class="card-body">
            some content
          </div>
        </div>
      </div>
    </app-device-list-item>
    <app-device-list-item>
      <div class="col-4 mb-4">
        <div class="card h-100">
          <div class="card-body">
            some content
          </div>
        </div>
      </div>
    </app-device-list-item>
  </div>
</div>

Вам необходимоприменить col-4 mb-4 CSS-классы к этому элементу обертки (хост в угловой терминологии), чтобы применить желаемый стиль:

@Component({
  selector: 'app-device-list-item',
  ...
  host: {
    class: 'col-4 mb-4'
  }
})

Answer 2

Проблема здесь с классами CSS, которые вы предоставили div, который содержит атрибут *ngFor, а именно классы class="col-4 mb-4". Вам нужно переместить эти классы за пределы компонента устройства.

Попробуйте изменить код на следующий

Компонент страницы (список страниц)

<div class="container">
  <div class="row" *ngFor="let device of devices" class="col-4 mb-4">
    <app-device-list-item></app-device-list-item>
  </div>
</div>

Компонент устройства (элемент списка устройств)

<div class="card h-100">
  <div class="card-body">
    some content
  </div>
</div>

Вот рабочий пример StackBlitz