Есть ли угловой угол 2+, эквивалентный реагирующим фрагментам? - PullRequest
Новая
       8

Есть ли угловой угол 2+, эквивалентный реагирующим фрагментам?

0 голосов
/ 03 сентября 2018

Я хотел бы извлечь часть компонента, фактически не создавая дополнительный элемент-обертку в физическом DOM, потому что это нарушает мой CSS.

Пример: я заметил раздел в своем HTML-шаблоне, который выглядит следующим образом: 

<div>Foo</div>
<div>Bar</div>

Я хочу извлечь эти два тега в компонент с именем <MyComponent> и использовать его в других местах. Однако, когда я на самом деле не хочу, чтобы родительский компонент с именем <MyComponent> был добавлен в DOM. В настоящее время я вижу визуализированный 

<MyComponent>
  <div>Foo</div>
  <div>Bar</div>
</MyComponent>

React позволяет мне полностью решить эту проблему, используя концепцию компонента Fragment , который позволяет группировать элементы без добавления дополнительного узла в DOM.

Мне интересно, есть ли какой-то раздел API Angular Component, который мне не хватает, который позволил бы мне сделать это, или это принципиально другой способ, которым я должен думать о повторном использовании кода в Angular Components.

Это приложение на Angular 6, и я работаю в фоновом режиме в React 16 +.

Отредактировано с помощью примера фрагмента кода: я хотел бы, чтобы это отображалось без добавления элемента hello в DOM - я только хочу, чтобы тег <p> внутри компонента hello отображался

https://stackblitz.com/edit/angular-kaxm27

Ответы [ 2 ]

0 голосов
/ 10 января 2019

«ng-container» - это элемент, доступный в Angular 2+, который может выступать в качестве хоста для структурных директив. 

<ng-container> 
  <div>Foo</div>
  <div>Bar</div>
</ng-container>
0 голосов
/ 03 сентября 2018

На момент написания этой статьи эта функция не поддерживалась напрямую. Некоторые комментаторы указали, что это возможно с помощью некоторых низкоуровневых API, но я еще не нашел пример рабочего кода.

В репозитории Angular Github есть запрос на открытую функцию с активным обсуждением, как выяснить, как добавить это для будущего выпуска (после Angular 6).

Дальнейшее чтение из хранилища Github:

...