Динамическое программирование в вашем HTML с точки зрения дерева

Прежде чем что-либо использовать, давайте поговорим о том, что на самом деле представляет собой NgTemplateOutlet. Причина, по которой я хотел поговорить об этой директиве Angular, заключается в том, что она позволила мне сэкономить много времени на доставке моей функции, и из-за того, что я не знал, что есть на самом деле, это заставило меня понять важность этого за короткое время, и я думаю, что получил Лучшее из этого, поэтому я решил рассказать об этом всем, для кого соскучился по этому замечательному функционалу. Я больше практичный парень, и в этой статье я расскажу, как эта функция помогла мне решить реальную головоломку.

https://angular.io/api/common/NgTemplateOutlet#description — то, что нужно для официальной документации

Ребята из Angular коротко и мило рассказали об этом в своей документации. И если вы не читали официальную документацию, то… это директива Angular, которая вставляет встроенное представление из предопределенного HTML-шаблона или, другими словами, TemplateRef. Другими словами, один небольшой фрагмент фрагмента HTML может быть повторно использован несколько раз вместе с передачей множества контролируемых параметров.

Что довольно круто, если подумать, и заставляет меня задаться вопросом, используем ли мы такую ​​функциональность на стороне HTML? Или, возможно, нужна ли нам такая функциональность. Как бы то ни было, и для тех из вас, кто заинтересован, и для тех, кто хочет, чтобы он выполнял свою работу, эта статья может пролить свет на то, как вы можете использовать его более динамично.

И вы меня знаете 🙂 С какой бы реализацией я не сталкивался, мне нравится, что она ведет себя более динамично, с чистым сокращением строк кода, с чистым выполнением

Имейте в виду, что это касается HTML, а обычные файлы component.ts не подходят. Насколько динамическим он может быть в файле HTML? Для этого, друзья мои, мы будем реализовывать динамическую древовидную структуру, используя наш собственный NgTemplateOutlet, без сторонних библиотек и других инструментов, только обычный Typescript и HTML. .

И кто-то может подумать, что нелепо реализовывать древовидное представление с нуля, учитывая все другие доступные реализации, но могут быть ситуации, когда они могут не соответствовать вашим требованиям, а также кому не понравится хороший вызов 😉🌴🌴

Структура Дерева🌴 отличается, и мы говорим о дереве, которое визуализирует иерархию разных видов. Изображение выше является хорошим примером того, каким будет окончательный результат. Делая шаг назад и размышляя о том, какой должна быть структура данных в этом типе визуализации, становится очевидным, что она должна следовать шаблону мастер-подробности или шаблону родитель-потомок от начального узла до конца. Итак, чтобы немного перемотать вперед, я выделю из контекста идею того, что должно быть привязано к дереву, а также внутреннюю полезную нагрузку, с которой оно поставляется.

Проще говоря, давайте забудем об этом и представьте, что мы наполовину сделали код.

Под словом «сделано наполовину» я бы имел в виду, что я реализовал бы рекурсивную функцию для моего воображаемого бэкенда, которая предоставляет мне данные для отображения в виде дерева, и, используя мою любимую функциональность, я создаю полезную нагрузку, более в -line с тем, что я хочу, что больше похоже на JSON с каскадными отношениями родитель-потомок. Это упростит работу с DOM, когда произойдет привязка данных. В двух словах, функция, которую я использую в своем .ts-файле, будет действовать как канал или украшение для данных, поступающих из воображаемого REST API, и будет создавать из них новый JSON.

Надеюсь, что перетаскивание может иметь смысл для вас сейчас 😅😅

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

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

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

Прежде чем мы перейдем к заключительным частям привязки данных к DOM, я хотел прояснить несколько моментов. Во-первых, мне не нужно было включать всю эту чушь сверху, чтобы показать, как будет выглядеть любительская полезная нагрузка, чтобы я мог связать все, что есть, с DOM. Я мог бы сразу же использовать образец полезной нагрузки и делать поспешные выводы. Но есть много вещей, о которых мы не знаем, но которые пересекаются с нашей работой, и всегда дополнительный шаг вперед сделает кого-то более уверенным в том, что он / она упустил бы или какие другие идеи или детали они упустили. или хотели попробовать, которые всегда открывают новые возможности. Тот факт, что я столкнулся с приведенным выше потоком, проложил мне путь к использованию такой Директивы в моем исследовании и хотел, чтобы я больше обсудил ее, что в данном случае я нахожу забавным и интересным одновременно, потому что это было то, что никогда не попадал в мой радар. Итак, вера в волшебные вещи ведет в волшебные места, давайте прыгнем, чтобы увидеть красавицу бала.

Итак, у нас есть JSON, который мы хотим прикрепить к DOM. Проблема в том, что, поскольку в любой момент времени JSON будет динамическим, мы не можем сделать нашу реализацию в HTML статической. Это означает, что мы не можем заставить нашу реализацию останавливать выполнение на фиксированной длине. для этого мы должны сделать функциональность, которая будет динамически вести себя на внешнем интерфейсе.

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

Я полагаю, вы знакомы с ng-template, ng-container и т. д., которые представляют собой элементы рендеринга в Angular, которые также являются структурными директивами внутри. мы видим наш собственный ngTemplateOutletна месте.

  • #recursiveList будет TemplateRef, который повторно используется несколько раз.
  • Объект контекста, который будет передан вместе с TemplateRef, будет нашим JSON, который равен переменной «список».
  • Использование ключа $implicit в объекте контекста установит его значение по умолчанию.

Итак, давайте украсим наш элемент списка, который будет представлять каждый узел в нашем дереве.

В этой оформленной версии TemplateRef видно, что мы снова вызываем директиву Angular в форме того же самого TemplateRef. как и раньше, это #recursiveList, но на этот раз объект контекста представляет дочерний узел, который находится под родительским узлом JSON, что резонирует item.children, где itemявляется родительским объектом, представляющим вышеупомянутые отношения родитель-потомок, которые мы хотели выполнить.

И, наконец, с небольшой тонкой настройкой и добавлением некоторых значков, чтобы сделать представление в виде дерева более правильным, окончательный кодовый блок в HTML будет таким, как есть. Обратите внимание, насколько он чистый, и повторное использование базового HTML-шаблона позволяет нам создавать древовидную структуру с любого конца.

Когда данные передаются в HTML, ngTemplateOutlet делает свое дело, и дерево развертывается просто отлично. Просто сравните строки кода, которые нам нужно было бы написать в HTML, и проанализируйте его динамический аспект. Я почти уверен, что многие из вас подумали бы только об использовании *ngFor, но это совсем немного, друзья мои.

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

Я надеюсь, что это поможет в долгосрочной перспективе вашему творчеству.

До следующего раза.