Как клонировать элемент / шаблон DOM с помощью angular и сохранить его привязку? - PullRequest
Новая
       18

Как клонировать элемент / шаблон DOM с помощью angular и сохранить его привязку?

1 голос
/ 20 апреля 2019

Я пытаюсь создать липкую директиву, которая делает элемент, на котором он присутствует, прокручивающимся при прокрутке (например, липкий заголовок). Я собираюсь сделать это, сначала клонировав элемент / шаблон DOM, на котором присутствует директива, и, когда вы прокручиваете клон, придерживается вершины, используя position: fixed, top: 0, width: blapx. Причиной использования клона является то, что высота окна просмотра не изменяется и в макете нет скачков. Поскольку клон использует position: fixed, он должен быть точной копией исходного элемента / DOM и сохранять все его привязки.

Я попытался создать директиву под названием sticky, которую вы могли бы поместить в элемент, который вы хотите сделать липким при прокрутке. Моя первоначальная идея заключалась в использовании this.viewRef.createEmbeddedView(templateRef внутри директивы. Но директива получает доступ только к ViewContainerRef и ElementRef, а НЕ TemplateRef, поскольку она не является структурной директивой. Я не собираюсь использовать structural directive, поскольку у нас может быть только одна структурная директива на элемент, и это может быть ограничительным. Например, я намерен использовать эту липкую директиву для заголовка таблицы, которая построена с использованием cdk-table, а строка заголовка использует <tr *cdkHeaderRowDef></tr>, поэтому я не могу использовать структурную директиву здесь. Кроме того, cdk-table не позволяет вставлять любые другие теги / компоненты, кроме table tags.

Кроме того, я не могу использовать resolveFactory(component) внутри директивы, так как директива может присутствовать в простом элементе DOM, таком как div. Например, <div class="header" sticky> contents here.. </div>

Кроме того, я бы не хотел использовать position: sticky, так как он не имеет полной кросс-браузерной поддержки.

Из-за этих ограничений я хотел бы использовать директиву атрибута для удовлетворения всех требований.

Пример использования моей директивы. Обратите внимание, что он также может присутствовать на 2 или более элементах в представлении. В этом случае второй придерживается ниже первого и т. Д. Это просто дополнительная информация, которая не имеет отношения к исходной проблеме. 

<div class="header" sticky>
 Title of the page
 <button class="btn btn-default"> Save</button>
</div>

<tr cdk-header-row *cdkHeaderRowDef="selectedColumnIds" sticky>
</tr>

<summary-element sticky>...some content</summar-element>

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

Angular: 7.0.2

...