CODEWITHSUNDEEP
blazor
Anatolij Terentjev
Anatolij Terentjev

Reputation: 31

Can't make nested components

Sorry, if the question is related to my lack of experience. I am trying to make a component library for working with a mapbox from blazor. Now I have a main component MapBoxView, that displays a map and MapboxGeocoder, which used for finding objects . Each of component has a procedure in the main component OnFirstAfterRenderAsync():

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

and in nested component:

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);
}

When in demo program I use code:

@page "/"

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

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

then all works fine, and I get the picture I want:enter image description here

When in demo program I use code:

<MapBoxView zoom=@_zoom container=@containerName mapCenter=@centerOfView>
    <MapBoxGeocoder Id="geocoder">
    </MapBoxGeocoder>
</MapBoxView>

That is, I put the nested component in the main one, then the geocoder (left bottom window with text - Search on the picture) is not shown and the program does not enter the procedure OnFirstAfterRenderAsync() of MapBoxGeocoder component. Main component MapBoxView has razor code:

@namespace MapBoxBlazor

@inherits BaseMapBoxView

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

What am I doing wrong? How to do it right?

Upvotes: 0

Views: 2283

Answers (1)

Vencovsky
Vencovsky

Reputation: 31565

You should take a look at the docs about ChildContent.

You need to use a RenderFragment named ChildContent to allow you to render nested components.

The parent component must have the property

public RenderFragment ChildContent { get; set; }

And render it in the place your want. e.g.

<div> 
    @ChildContent
</div>

And this property will render everything inside the parent component.

So for you case, MapBoxView should have the ChildContent and render it inside for it to work.

Upvotes: 2

Related Questions