Blazor中的等价角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;
        }
    }