WPF CefSharp 与Angular js 界面的互操作

本文介绍了一种WPF与Angular应用之间的双向交互方案。通过创建一个C#类与Angular组件进行消息传递,实现了从WPF到Angular及从Angular到WPF的数据交换。此方案依赖于CefSharp浏览器控件,确保了界面更新与回调方法的有效执行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  首先创建一个与AngularCompnent交互的类
public class WPFAngularObj
    {
        private IJavascriptCallback wpfToAngularCallback;

        public void wpfToAngularExecute(string msg)
        {
            wpfToAngular(wpfToAngularCallback);
            wpfToAngularCallback.ExecuteAsync(msg);
        }

        public void wpfToAngular(IJavascriptCallback javascriptCallback)
        {
            this.wpfToAngularCallback = javascriptCallback;
        }

        public void angularToWPF(string msg)
        {
            MessageBox.Show(msg);
        }
    }

其次创建一个Angular应用 修改AppComponent 如下:

constructor(private detechChangeRef:ChangeDetectorRef){
  }

  ngOnInit(){
    /* WPF 调用 Angular */
    window['wpfToAngularObj'].wPFToAngular((msg)=>{
      this.title=msg
      this.detechChangeRef.detectChanges()
    })
  } 


  /*Angular 调用  C# */
  mytest(ds){
    window['wpfToAngularObj'].angularToWPF(this.title)
  }

最后在主程序中注册交互类的实例,并执行调用方法即可

private WPFAngularObj wPFAngularObj;
        public MainWindow()
        {
            InitializeComponent();
            wPFAngularObj = new WPFAngularObj();
            CefSharpSettings.LegacyJavascriptBindingEnabled = true;
            this.sdfs.RegisterJsObject("wpfToAngularObj", wPFAngularObj);
        }

        public Object page
        {
            get;set;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            wPFAngularObj.wpfToAngularExecute(this.sd.Text);
        }

注:
1、Angular 应用必须在构造器中传入 监测器,否则程序运行结束,但界面不会刷新
2、C# callback注册的方法必须遵守 首字母小写的 命名规范,否则将不能实现方法的绑定

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值