Как сделать компонент портала в Blazor?

Question

Портал - это компонент, который отображает дочерние компоненты в другом месте дерева dom.

Например,

Как создать компонент, который не находится внутри body но отобразит ли его дочерние компоненты внутри элемента body?

Answer 1

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

Answer 2

Вообще говоря, Портал используется для визуализации контента вне иерархии DOM родительского компонента, а также полезен для визуализации динамического c контента. Порталы нуждаются в ссылочном элементе / компоненте, чтобы присоединиться к нему. Например, в angular CDK у вас есть Portal и PortalOutlet (элемент ссылки).

Blazor не предлагает эту функциональность изначально, но вы можете сделать нечто подобное, используя RenderFragment и сервис.

Предположим, у вас есть компонент, ваш PortalOutlet. Этот компонент имеет параметр типа RenderFragment, он также предоставляет сервис для присоединения и отсоединения контента к этому Renderfragment. Вы можете использовать этот сервис для добавления компонентов / контента из другого компонента и получить эффект, похожий на порталы. Смотрите пример этой услуги здесь

https://github.com/amuste/DnetOverlay/blob/master/src/DnetOverlayComponent/Infrastructure/Services/OverlayService.cs.

Вы можете увидеть полную реализацию здесь https://github.com/amuste/DnetOverlay