如何将Razor组件库（RCL）的点击事件传递至MAUI项目？

核心思路是解耦RCL与MAUI项目的依赖——RCL不能直接引用MAUI项目（会导致循环依赖或平台耦合），因此需要通过「传递导航逻辑」的方式让MAUI项目负责具体的页面跳转，RCL仅触发跳转事件。

以下提供两种常用实现方式：

方式一：通过组件参数传递委托（简单场景） #

适合导航逻辑单一的情况，直接给RCL组件传递MAUI侧的导航方法。

1. 修改RCL中的共享组件 #

在RCL的SharedPage.razor中添加一个委托类型的参数，按钮点击时调用该委托：

<MudButton OnClick="@(() => NavigateToEdit?.Invoke(Profile.UserId))">
    <MudText>Edit</MudText>
</MudButton>

@code {
    // 接收MAUI侧传入的导航逻辑
    [Parameter]
    public Func<string, Task>? NavigateToEdit { get; set; }

    // 假设Profile是组件的业务参数
    [Parameter]
    public UserProfile Profile { get; set; } = default!;
}

2. 在MAUI项目中引用组件并传递导航逻辑 #

在MAUI项目的页面（如MainPage.razor）中，引用RCL组件时传入具体的MAUI导航实现：

<SharedPage Profile="@currentProfile" NavigateToEdit="@HandleNavigateToEdit" />

@code {
    private UserProfile currentProfile = new UserProfile { UserId = "user_123" };

    // MAUI侧的具体导航逻辑
    private async Task HandleNavigateToEdit(string userId)
    {
        // 方式1：使用Blazor NavigationManager跳转（适用于Blazor WebView场景）
        await NavigationManager.NavigateTo($"/MauiONLYPage/{userId}");

        // 方式2：使用MAUI Shell导航（原生MAUI场景）
        // await Shell.Current.GoToAsync($"//MauiONLYPage?UserId={userId}");
    }
}

方式二：通过依赖注入（DI）实现接口（复杂场景） #

适合需要复用导航逻辑、或有多个组件需要导航的场景，通过接口定义导航契约，MAUI侧实现具体逻辑。

1. 在RCL中定义导航接口 #

创建一个平台无关的接口，定义导航方法：

namespace SharedRCL.Services;

public interface IProfileNavigationService
{
    Task NavigateToEdit(string userId);
}

2. 在RCL组件中注入并使用接口 #

修改RCL的SharedPage.razor，注入接口并在按钮点击时调用：

@inject IProfileNavigationService NavigationService

<MudButton OnClick="@(() => NavigationService.NavigateToEdit(Profile.UserId))">
    <MudText>Edit</MudText>
</MudButton>

@code {
    [Parameter]
    public UserProfile Profile { get; set; } = default!;
}

3. 在MAUI项目中实现接口 #

创建接口的实现类，编写MAUI专属的导航逻辑：

namespace MAUIProject.Services;

public class ProfileNavigationService : IProfileNavigationService
{
    private readonly NavigationManager _navigationManager;

    public ProfileNavigationService(NavigationManager navigationManager)
    {
        _navigationManager = navigationManager;
    }

    public Task NavigateToEdit(string userId)
    {
        // 根据MAUI场景选择导航方式
        _navigationManager.NavigateTo($"/MauiONLYPage/{userId}");
        // 或Shell导航：return Shell.Current.GoToAsync($"//MauiONLYPage?UserId={userId}");
        return Task.CompletedTask;
    }
}

4. 在MAUI项目中注册服务 #

在MAUI的Program.cs中，将实现类注册到DI容器：

builder.Services.AddScoped<IProfileNavigationService, ProfileNavigationService>();

关键说明 #

• 两种方式都遵循依赖倒置原则，RCL只定义「需要导航」的行为，不关心具体如何导航；MAUI项目负责实现具体的平台导航逻辑。
• 避免RCL直接引用MAUI项目，否则会破坏共享库的平台无关性，还可能引发循环依赖问题。

内容的提问来源于stack exchange，提问作者CodeMan03