从剃刀组件所在的父页面拉取参数

Question

这是我页面的一部分。

@page "/campaigns/{id:int}"
@inject ICampaignService CampaignService
@inject NavigationManager NavigationManager

<PageTitle>Campaign Detail Page</PageTitle>
@if (campaign == null)
{
    <span>@message</span>
    <p><button class="btn btn-primary" @onclick="(() => ShowAll())">Back to Campaigns</button></p>
}
else
{
    <div class="row">
        <div class="col-sm-8">
            <div class="container p-3 my-3 border">
                <h1>@campaign.Title</h1>
                <p>@campaign.Description</p>
                <p>This container has a border and some extra padding and margins.</p>
            </div>
        </div>
        <div class="col-sm-4">
            <ChaptersByCampaignList />

这是 ChaptersByCampaignList 组件。

@inject IChapterService ChapterService

<h3>Chapters</h3>
<ul class="list-group">
    @if (ChapterService.ChaptersByCampaign == null)
    {
        <li class="list-group-item">No Chapters</li>
    }
    else
    {
        @foreach (var dbObject in ChapterService.ChaptersByCampaign)
        {
            <li class="list-group-item">@dbObject.OrderIndex - @dbObject.Title</li>
        }
    }
</ul>

@code {
    [Parameter]
    public int Id { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        await ChapterService.GetAllByCampaignId(Id);
    }
}

ChaptersService 有这些代码片段。

public List<Chapter> Chapters { get; set; }
public List<Chapter> ChaptersByCampaign { get; set; }

public async Task GetAllByCampaignId(int id)
{
    var response = await _httpClient.GetFromJsonAsync<List<Chapter>>($"api/chapters/campaign/{id}");
    if (response != null)
        ChaptersByCampaign = response;
}

首先，ChaptersByCampaignList 组件似乎没有通过 URL 获取 CampaignId 传递，通过调试我可以看到它一直设置为 0。我需要从传递 URL @page "/campaigns/{ id:int}"

谢谢！

Answer 1

当然，当我提交这篇文章时，我就有了一个想法。只需这样做

<ChaptersByCampaignList Id="@Id" />

将参数传递给组件。