Dependency injection (DI)

html.inject may be the most challenging API in Fun.Blazor due to its render behavior. (Even though we do not have many APIs, just a bunch of DSLs for building the DOM.) By default, every time you call it, you will get a fresh new component. So, if you want to keep some state that should not be erased by its caller, you should specify a key as its first parameter.

Another challenging thing is its internal rendering. It requires a function as its parameter, this function is 'Services -> NodeRenderFragment. 'Services is a tuple of service types you want to inject. NodeRenderFragment is a delegate that composes the DOM tree (which can be treated as another function). By default, the DOM tree will not change unless you manually trigger it by calling hook.StateHasChanged(), or by doing things like the example below:

Normally you should consider using html.injectWithNoKey, because it performance better, but sometimes you may have below situation:

let comp1 = html.injectWithNoKey(...)
let comp2 = html.injectWithNoKey(...)

let comp =
    div {
        if some conditions then comp1
        else comp2
    }

In above situation you will get unexpected behavior, because blazor will consider comp1 and comp2 as the same component, and will not re-create related component for you. and the consumer comp may not know if comp1 or comp2 has specified key or not, even the key is specified, the key maybe the same.

So the nicer api is give to the inject with ramdom key which is html.inject. But as it will re-create component everytime when you call html.inject, so it also may lead other situation, like infinite re-render. But do not be afraid, it is rare, I only face this issue once when using MudBlazor's MudLayout and MudDrawer together, for this case, I use html.injectWithNoKey to solve it. I can also use html.inject (key, ...) to solve it too.

If you don't like the pattern like html.inject/adaptiview, you can just create your component inherit FunComponent and get the benefit of the DOM DSL and third-party DSL support like MudBlazor from Fun.Blazor.

Dependency injection (DI) is essential in many software applications. ASP.NET Core has built-in support for it, and it is also helpful for testing and cross-concern solutions. Not only services but also UI components can be powered by dependency injection.

html.inject is used to inject the service you defined in the DI container.

We also provide html.scope which can be used to create another scope, so you can use it to isolate some data or service state.

html.inject also supports async rendering. Because the function you passed in will be called in OnInitializedAsync of the related Blazor component, so at this point, we can invoke the task.