Не могу сделать вложенные компоненты

Question

Извините, если вопрос связан с моей неопытностью. Я пытаюсь сделать библиотеку компонентов для работы с картографическим боксом из Blazor. Теперь у меня есть основной компонент MapBoxView, отображающий карту, и MapboxGeocoder, который используется для поиска объектов. Каждый компонент имеет процедуру в основном компоненте OnFirstAfterRenderAsyn c ():

protected async override Task OnFirstAfterRenderAsync()
{
    await base.OnFirstAfterRenderAsync();
    Dictionary<string, object> o = new Dictionary<string, object>();
    ...
    await JsInvokeAsync<object>("mapgl.mymap.initMap", o);
}

и во вложенном компоненте:

protected async override Task OnFirstAfterRenderAsync()
{
    await base.OnFirstAfterRenderAsync();
    Dictionary<string, object> o = new Dictionary<string, object>();
    o.Add("container", container);
    await JsInvokeAsync<object>("mapgl.mygeocoder.initGeocoder", o);
}

В демонстрационной программе я использую код:

@page "/"

<MapBoxView zoom=@_zoom container=@containerName mapCenter=@centerOfView>
</MapBoxView>

<MapBoxGeocoder Id="geocoder">
</MapBoxGeocoder>

тогда все работает нормально, и я получаю желаемое изображение:

When in demo program I use code:

То есть я помещаю вложенный компонент в основной, то геокодер (левое нижнее окно с текстом - Поиск по картинке) не отображается и программа не входит в процедуру OnFirstAfterRenderAsyn c () компонента MapBoxGeocoder. Основной компонент MapBoxView имеет код бритвы:

@namespace MapBoxBlazor

@inherits BaseMapBoxView

    <div id='mapContainer'>
    </div>

Что я делаю не так? Как это сделать правильно?

Answer 1

Вам следует взглянуть на документы о ChildContent .

Вам необходимо использовать RenderFragment с именем ChildContent, чтобы позволить вам отображать вложенные компоненты.

Родительский компонент должен иметь свойство

public RenderFragment ChildContent { get; set; }

И отображать его в нужном вам месте. например,

<div> 
    @ChildContent
</div>

И это свойство будет отображать все внутри родительского компонента.

Итак, в вашем случае MapBoxView должен иметь ChildContent и отображать его внутри, чтобы он работал.

Answer 2

Большое спасибо. Я знаю этот способ. Вопрос был в том, может быть, есть способ поступить как с «div» - внутри которого можно вставить произвольные другие теги. Хотя если я знаю, как реализованы теги html, то кажется очевидным, что это невозможно. Было бы удобно разместить другие теги внутри тега карты (геокодера и т. Д.), Не затрагивая тег карты