在 Blazor 模板 Visual Studio 2019 中自动导航两个 Razor 组件

Question

我有两个剃须刀组件，名称分别为“new”和“second”。我如何自动导航它们，我的意思是当有东西要显示时自动导航到新的，当没有东西要显示时，再次自动导航回第二个。

这是新的：@page "/new"

<div class="Vistit">
        <div class="container-fluid">
            <div class="row h-100">
                <div class="col-sm-8 ">


                    @foreach (var appointment in _visibleAppointments)
                    {
                        <div class="row mb-5">
                            <div class="col-sm-4"> <h1> @appointment.HeaderText: </h1> </div>

                            <div class="col-sm-8">
                                @foreach (var contactPerson in appointment.Contacts)
                                {
                                    <h1> @contactPerson.Gender @contactPerson.Name </h1>
                                }

                            </div>

                        </div>
                        <div class="row mt-5"></div>
                        <div class="row mt-5"></div>
                        <div class="row mt-5">
                            <div class="col-sm-4"> <h1>Company:</h1> </div> <div class="col-sm-8"> <h1> @appointment.Company </h1> </div>
                        </div>
                    }

                </div>

                <div class="col-sm-4 ">

                        <TemplatedCarousel Items="AssetImages" TItem="ImageFile" AutoScrollInterval="3" OnCarouselItemClicked="OnCarouselItemClicked" ShowNavigation="false">
                            <ItemTemplate>

                                <div class="Slideimg">
                                    <img class="d-block center" src="@GetImageSource(@context)" alt="@context.FileName">
                                </div>
                                <div class="Slogan">
                                    <p>Here is slogan!</p>
                                </div>
                            </ItemTemplate>
                        </TemplatedCarousel>

                </div>
                </div>
        </div>
        </div>

这是第二个：@page"/second"

<div class="SecondP">
        <div class="container-fluid">
            <div class="row h-100">
                <div class="col-sm-6 ">
                    <video controls="controls" class="ml-auto" autoplay muted loop>
                        <source src="/Video/TestMovie_small.mp4" type="video/mp4" />
                    </video>
                </div>

                <div class="col-sm-6 ">
                    <TemplatedCarousel Items="AssetImages" TItem="ImageFile" AutoScrollInterval="3" OnCarouselItemClicked="OnCarouselItemClicked" ShowNavigation="false">
                        <ItemTemplate>
                            <img class="d-block center" src="@GetImageSource(@context)" alt="@context.FileName">
                        </ItemTemplate>
                    </TemplatedCarousel>
                </div>
            </div>
        </div>
    </div>

Answer 1

您可以在新的或第二个@code {} 部分中覆盖OnInitializedAsync() 或OnInitialized() 并注入NavigationManager 来帮助您。

@inject NavigationManager navigationManager // at the top
///HTML
@code
{
    protected override Task OnInitializedAsync()
    {
        //if something is empty
        navigationManager.NavigateTo("/second");
    }
}