WPF CefSharp 与Angular js 界面的互操作

最新推荐文章于 2020-12-12 11:36:27 发布

小生丶无暇

最新推荐文章于 2020-12-12 11:36:27 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： .NET 文章标签： CefSharp Angular CefSharp

本文链接：https://blog.youkuaiyun.com/CaseTime/article/details/81901702

.NET 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种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);
        }