在 CefSharp 中使用 Angular2

Question

我正在寻找一种Angular2在CefSharp控件中运行我的应用程序并建立双向通信的方法。我给你举两个例子：

1. 我的 Angular 应用程序中有一个按钮，并希望我的 CefSharp 输出一个消息框（仅作为示例）。我知道如何进入 javascript 代码，但我无法编译我的 AngularApp，如果你从 C# 添加一个类，因为它不知道这一点。

C#代码：

private void RegisterJsObjects()
{           
    _browser.RegisterJsObject("cefTestClass", new TestClass());
}

class TestClass
{
    public void csF(string message) 
    {
        MessageBox.Show(message, "#C", System.Windows.Forms.MessageBoxButtons.OK, System.Windows.Forms.MessageBoxIcon.Information);
    }
}

角度代码：

<button (click) ="cefTestClass.csF('text')"> C# Button </button>

---

2. 我想Angular从我的CefSharp应用程序中调用函数，因为它们在编译后得到不同的名称，我无法访问它们。

Answer 1

注册的对象绑定到 的窗口对象javascript。你window在调用时错过了这个词。你必须这样称呼它：

<button (click) ="appComponentFunction()"> C# Button </button>

并在您的 AppComponent 中：

appComponentFunction(){
    window['cefTestClass'].csF('text');
}

注册对象的方法以小写字母开头很重要，否则javascript不执行它们。

如果你想从 c# 调用一个 Angular 函数，你可以在你的 c# 类中注册一个回调，如下所示：

private IJavascriptCallback callback;

public void registerCallback(IJavascriptCallback callback)
{
    this.callback = callback;
}

现在你必须在你的 Angular 应用程序中定义你的回调（例如，在你的根组件的 NgOnInit 中）：

window['cefTestClass'].registerCallback(function() {
  window.alert("Hallo");
});

现在您可以随时调用该函数c#：

callback.ExecuteAsync();