Как я могу получить доступ ко всем дочерним компонентам некоторого типа из директивы? - PullRequest
Новая
       23

Как я могу получить доступ ко всем дочерним компонентам некоторого типа из директивы?

0 голосов
/ 30 января 2020

Я просмотрел несколько различных тем по этому вопросу, но все еще не нашел ничего, что мне подходит. Самая близкая вещь, которую я мог найти, кажется, давно устарела: go: https://github.com/angular/angular/issues/8277

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

<splitter myDirective>
    <split-panel>
        <my-component-1>
            <div>
                <pivot-grid></pivot-grid>
            </div>
        </my-component-1>
    </split-panel>
    <split-panel>
        <my-component-2>
            <div>
                <pivot-grid></pivot-grid>
            </div>
        </my-component-2>
    </split-panel>
</splitter>

Разветвитель позволяет изменять размеры во время выполнения. В рамках моей директивы у меня есть доступ к компоненту сплиттера и его ElementRef. В данный момент я рекурсивно копаю children на ElementRef.nativeElement, а затем устанавливаю высоту на моем PivotGridComponent с помощью Renderer2. Однако проблема заключается в том, что есть предостережение для сторонней организации PivotGridComponent, в котором я должен установить свойство height самого компонента или у меня нет полосы прокрутки.

Я пробовал @ViewChildren, @ContentChildren, @host() @self() @optional(), и ни один из них не может схватить мой базовый PivotGridComponent. Я бы просто поместил @ViewChildren в сам компонент сплиттера, но это также сторонний компонент, так что это не вариант. Также не представляется возможным перемещаться по дереву компонентов так же, как я перемещаюсь по дереву ElementRef.

Как я могу получить доступ к компоненту из директивы? Я предполагаю, что больше невозможно получить компонент из ElementRef, как, по-видимому, указывает на указанную мной проблему GitHub.

1 Ответ

0 голосов
/ 30 января 2020

Вы можете использовать @ContentChildren для извлечения дочерних компонентов из вышестоящего компонента / директивы. Каждый раз, когда дочерний элемент добавляется, удаляется или перемещается, список запросов будет обновляться, и наблюдаемые изменения в списке запросов будут выдавать новое значение.

Вот пример: 

@ContentChildren(SplitPanelComponent) public splitPanelComponents: QueryList<SplitPanelComponent>;

Вы можете использовать его в своей директиве или в компоненте Splitter (где вы применяете директиву) и передать его в директиву.

Если вам нужен более конкретный пример, вы можете взгляните на пример кода моей библиотеки , где я также использую @ContentChildren.

Рабочий пример здесь .

...