在 Blazor 模板 Visual Studio 2019 中自動導航兩個 razor 組件

Question

我有兩個 razor 組件，名稱分別為“新”和“第二”。 我如何自動導航它們，我的意思是當有東西要顯示時自動導航到新的，當沒有東西要顯示時，再次自動導航回第二個。

這是新的：@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 {}部分中以 new 或 second 覆蓋OnInitializedAsync()或OnInitialized()並注入NavigationManager來幫助您。

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