Blazor 中的等效 Angular RouterOutlet

Question

Angular 有一个 RouterOutlet，它允许自动更改组件内部的内容 取决于路线。

在 Blazor 中似乎没有这样的机会......

如何在 Blazor 中实现这一点？

Answer 1

没有任何花哨的内置功能，但您可以使用导航管理器或路由绑定来实现。

1. 路由绑定

一个页面组件可以有多个路由。您可以将其用于简单的二进制情况，例如在添加和编辑页面之间共享逻辑。

    @page “/modifyperson”
    @page “/modifyperson/{Id}”

    @if(isEdit)
    {
    }

    @code
    {
        [Parameter] 
        public string  Id {get; set;}
        bool isEdit;

        protected override void OnInitialized()
        {
            if(!String.IsNullOrEmpty(Id))
                IsEdit=true;
        }
    }

1. 导航管理器

    @page ”/myfirstroute”
    @page “/mysecondroute”
    @inject NavigationManager navManager 
    @if(lastRouteInfo==PageRoutes.FirstRoute)
    {
        //do something different
    }

    @code
    {
        public enum PageRoutes{FirstRoute,SecondRoute}
        private PageRoutes route;
        protected override void OnInitialized()
        { 
            string lastRouteInfo= navManager.Uri.Split(“/“).Last();
            if(lastRouteInfo==“myfirstroute”)
                route=PageRoutes.FirstRoute;
            else if(lastRouteInfo==“mysecondroute”)
                route =PageRoutes.SecondRoute;
        }
    }