Kommunikation mellem komponenter og DI
Overfør data mellem overordnede og underordnede komponenter, brug cascading parameters, og injicér tjenester i komponenter.
Kommunikation mellem komponenter og DI er en gratis C# Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i C# Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. C# Academy-kurset indeholder 4 lektioner i alt.
Kommunikationsmønstre for komponenter
Blazor-komponenter kommunikerer i tre retninger: fra forælder til barn (parametre), fra barn til forælder (EventCallback) og på tværs af træet (CascadingParameters eller delte tjenester via DI).
Fra forælder til barn: parametre
Markér en komponentegenskab med [Parameter] for at gøre den indstillelig fra forælderen. Forælderen sender værdier som HTML-attributter på komponentens tag.
@* Child: Alert.razor *@
<div class="alert alert-@Type">
@Message
</div>
@code {
[Parameter] public string Type { get; set; } = "info"; // primary, warning, danger
[Parameter, EditorRequired] public string Message { get; set; } = "";
}
@* Parent usage: *@
<Alert Type="danger" Message="Something went wrong!" />
<Alert Message="Record saved." />Fra barn til forælder: EventCallback
En underordnet komponent eksponerer en EventCallback-parameter. Forælderen angiver en behandlermetode. Den underordnede komponent kalder den, når der sker noget.
@* Child: QuantityPicker.razor *@
<button @onclick="() => OnChanged.InvokeAsync(Value - 1)">-</button>
<span>@Value</span>
<button @onclick="() => OnChanged.InvokeAsync(Value + 1)">+</button>
@code {
[Parameter] public int Value { get; set; } = 1;
[Parameter] public EventCallback<int> OnChanged { get; set; }
}
@* Parent: *@
<QuantityPicker Value="@_qty" OnChanged="q => _qty = q" />
<p>Quantity: @_qty</p>Kommunikation mellem søskendekomponenter via forælderen
Hvis søskendekomponenter skal kommunikere, skal du føre data gennem den fælles forælder. Forælderen indeholder den delte tilstand og sender den til de underordnede komponenter som parametre.
@* Parent holds shared state *@
<CategoryFilter OnChanged="c => _category = c" />
<ProductList Category="_category" />
@code {
private string _category = "All";
}
@* CategoryFilter raises an event -> Parent updates _category
-> ProductList re-renders with new Category *@Kaskaderende parametre
Ombryd et deltræ i <CascadingValue> for at sende data til alle efterkommere uden at føre dem gennem hver mellemledskomponent.
@* Wrap a subtree *@
<CascadingValue Value="_theme">
<MainLayout />
</CascadingValue>
@code { private Theme _theme = new Theme { PrimaryColor = "#6366f1" }; }
@* Any descendant can receive it: *@
@code {
[CascadingParameter]
public Theme AppTheme { get; set; } = default!;
}
<h1 style="color: @AppTheme.PrimaryColor">Hello</h1>Indsættelse af tjenester med @inject
Brug direktivet @inject til at indsætte registrerede DI-tjenester direkte i komponenter. Rammeværket løser dem automatisk.
@inject IProductService ProductSvc
@inject ILogger<ProductList> Logger
@inject NavigationManager Nav
@code {
private List<Product> _products = new();
protected override async Task OnInitializedAsync()
{
Logger.LogInformation("Loading products");
_products = await ProductSvc.GetAllAsync();
}
private void GoToProduct(int id)
=> Nav.NavigateTo($"/products/{id}");
}Tjenester med afgrænset levetid i Blazor Server
I Blazor Server varer DI-området hele SignalR-forbindelsens levetid — ikke kun en enkelt anmodning. Vær opmærksom på, at tjenester med afgrænset levetid deles af alle komponenter i et kredsløb.
// Blazor Server: scoped = per circuit (connection lifetime)
builder.Services.AddScoped<CartService>();
// All components in the same browser tab share the SAME CartService
// This is GOOD for cart state (user's items persist across pages)
// This is BAD for request-scoped data — treat as session-like scope
// For true per-render-cycle scope, create your own:
using var scope = ScopeFactory.CreateScope();
var db = scope.ServiceProvider.GetRequiredService<AppDbContext>();NavigationManager til ruting
Indsæt NavigationManager for at navigere programmatisk, læse den aktuelle URL og håndtere navigationshændelser.
@inject NavigationManager Nav
@code {
private void GoHome() => Nav.NavigateTo("/");
private void GoToProduct(int id) => Nav.NavigateTo($"/products/{id}");
private void ForceReload() => Nav.NavigateTo("/", forceLoad: true);
protected override void OnInitialized()
{
// Read current URL
var uri = Nav.Uri;
var path = new Uri(uri).AbsolutePath;
}
}HttpClient i Blazor WASM
I Blazor WebAssembly skal du indsætte en forudkonfigureret HttpClient for at kalde dit API. Registrér den med en basisadresse i Program.cs.
// Program.cs (Blazor WASM)
builder.Services.AddScoped(sp => new HttpClient
{
BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
});
// Component:
@inject HttpClient Http
@code {
private List<Product> _products = new();
protected override async Task OnInitializedAsync()
{
_products = await Http.GetFromJsonAsync<List<Product>>("/api/products")
?? new();
}
}Praktisk eksempel: tjeneste til brugerkontekst
En tjeneste med afgrænset levetid, UserContextService, indsættes i flere komponenter på tværs af appen — alle ser de samme brugerdata uden at skulle sende dem gennem alle mellemled.
public class UserContextService
{
public string? Name { get; private set; }
public bool IsAdmin { get; private set; }
public async Task InitializeAsync(AuthenticationState auth)
{
var user = auth.User;
Name = user.Identity?.Name;
IsAdmin = user.IsInRole("Admin");
}
}
// Registered as scoped:
builder.Services.AddScoped<UserContextService>();
// Used in any component:
@inject UserContextService UserCtx
<p>Hello, @UserCtx.Name @(UserCtx.IsAdmin ? "(Admin)" : "")</p>Hurtigt tjek
Hvor længe varer levetiden for en DI-tjeneste med "afgrænset" levetid i Blazor Server?
Opsummering: komponentkommunikation og DI
Vigtigste pointer:
- Forælder → barn: [Parameter]-egenskaber; [EditorRequired] til obligatoriske parametre
- Barn → forælder: EventCallback; udløser automatisk forælderens StateHasChanged
- Søskende: før data gennem forælderens tilstand, eller brug en delt DI-tjeneste
- På tværs af træet: CascadingValue/CascadingParameter til dybe deltræer
- @inject til tjenester; tjenester med afgrænset levetid i Blazor Server varer hele kredsløbets levetid
- NavigationManager til programmatisk ruting
Lær C# med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 93
- Lektioner
- 346
Ofte stillede spørgsmål
Er lektionen “Kommunikation mellem komponenter og DI” gratis?
Ja — hele teksten til “Kommunikation mellem komponenter og DI” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af C# Academy-kurset, skal du opgradere til CoddyKit PRO. C# Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Kommunikation mellem komponenter og DI”?
Overfør data mellem overordnede og underordnede komponenter, brug cascading parameters, og injicér tjenester i komponenter. Du øver dig i C# Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på C# Academy?
Der kræves ingen tidligere erfaring. C# Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Kommunikation mellem komponenter og DI”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne C# Academy-lektion?
Ja. Alle C# Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Blazor-komponentmodellen
- Databinding og hændelseshåndtering
- Kommunikation mellem komponenter og DI
- Tilstandshåndtering i Blazor