Blazor 依赖注入妙用:巧设回调

文章目录

  • 前言
  • 依赖注入特性
    • 需求
    • 解决方案
    • 示意图

前言

依赖注入我之前写过一篇文章,没看过的可以看看这个。

C# Blazor 学习笔记(10):依赖注入

依赖注入特性

  • 只能Razor组件中注入
  • 所有Razor组件在作用域注入的都是同一个依赖。作用域可以看看我之前的文章。

需求

Blazor 依赖注入妙用:巧设回调_第1张图片
Razor组件关系

  • Main:主页面
    • TreeItem(多个):树节点

我想让主逻辑写在Main里面,组件只做最简单的交互。所有的点击事件都以回调的形式。

解决方案

在Service中声明回调

/// 
/// 节点回调状态
/// 
public enum T_JointState
{
    Add,
    Delete,
    Up,
    Down,
    Update
}

/// 
/// 节点添加回调
/// 
public Action<int, T_JointState> CallBack { get; set; }

在子组件中使用回调

///注入依赖
 [Inject]
 private JointService jointService { get; set; }


 [Parameter]
 public int Index { get; set; }



 public void AddBtn()
 {
     MessageService.ShowMsg("添加");
     jointService.CallBack(Index,T_JointState.Add);
 }

 public void DeleteBtn()
 {
     MessageService.ShowMsg("删除");
     jointService.CallBack(Index, T_JointState.Delete);

 }

 public void UpBtn()
 {
     MessageService.ShowMsg("上移");
     jointService.CallBack(Index, T_JointState.Up);

 }

 public void DownBtn()
 {
     MessageService.ShowMsg("下移");
     jointService.CallBack(Index, T_JointState.Down);

 }
 public void EditBtn()
 {
     MessageService.ShowMsg("编辑");
     jointService.CallBack(Index, T_JointState.Update);

 }

在父组件中设置回调

[Inject]
private JointService jointService { get; set; }


 protected override void OnAfterRender(bool firstRender)
 {
     if (firstRender)
     {
         jointService.CallBack = JointNodeCallBack;
         StateHasChanged();
     }
     base.OnAfterRender(firstRender);
 }
      /// 
      /// 设置回调函数
      /// 
      /// 
      /// 
      public void JointNodeCallBack(int index,T_JointState state)
      {
          MessageService.ShowMsg("回调成功!");
      }

示意图

Blazor 依赖注入妙用:巧设回调_第2张图片

你可能感兴趣的:(Blazor基础知识,Blazor)