从 Unity WebGL 调用 Angular2 函数答案

【问题标题】：Call an Angular2 Function from Unity WebGL从 Unity WebGL 调用 Angular2 函数
【发布时间】：2017-02-20 18:59:56
【问题描述】：

目前我正在使用带有 Unity 可视化器的 Angular2 版本 2.1.2，使用 Unity 5.5 构建。

我需要做的是从 Unity 与 Angular2 进行通信。
我正在使用类似于下面的代码

public void GetBillOfMaterials(string callbackFn)
    {
        var result = LightSystem.BillOfMaterials.Aggregate("", (current, material) => current + (material + Environment.NewLine));

        Application.ExternalCall(callbackFn, result);
    }

在Angular2中将调用上述函数，如下所示

public GetBillOfMaterial() 
{
  SendMessage("Manager", "GetBillOfMaterials", "alert");
}

问题是，当我在“callbackFn”中尝试任何 angular2 函数时，它不会找到我的函数。

我试图调用的函数位于如下所示的服务内部：

import { Injectable } from '@angular/core';
import { FinishService } from "./sysWideComps/finish/finish.service";
import { ColorService } from "./sysWideComps/colorTemp/color.service";
import { CircuitService } from "./filters/tabs/circuit/circuit-service";
import { StandoffService } from "./filters/tabs/standoff/standoff-tab.service";
@Injectable()
export class UnityService {
  private isFirstCall: boolean = true;
  constructor(private colorService: ColorService, private finishService:FinishService, private circuitService: CircuitService, private standoffService: StandoffService) { }

public ChangeFinish(finishType: string) {
  console.log(`This is the finish type ${finishType}`);
  this.sendMsgParam("ChangeFinish", finishType);
}

public ChangeColorTemp(colorTemp: number) {
  this.sendMsgParam("ChangeColorTemperature", colorTemp);
}
public ChangeCircuit(circuitType: string) {
  this.sendMsgParam("ChangeCircuit", circuitType);
}

public CreateModel(params: string) {
if (this.isFirstCall) {
  this.ChangeCircuit(this.circuitService.getCircuit());
  this.ChangeFinish(this.finishService.getFinish().FinishName.replace(" ", ""));
  this.ChangeStandoffLength(this.standoffService.getStandoffLength());
  //Dropdown goes here
  let tempCTemp = this.colorService.getColorTemp().Temperature.replace("k", "");
  let tempNum: number =+ tempCTemp;
  this.ChangeColorTemp(tempNum);
  this.isFirstCall = false;
}
  this.sendMsgParam("CreateModel", params);
}
public Delete() {
  this.sendMsg("Delete");
}

public ResetView() {
  this.sendMsg("ResetCamera");
}

public RotateObject() {
  this.sendMsg("RotateCurrentObject");
}

public Unselect() {
  this.sendMsg("Unselect");
}

ChangeStandoffLength(input: number) {
  this.sendMsgParam("ChangeSystemDropdownLength", input.toString());
}

public AddStandoff(params: string) {
  let data: string = params;
  this.sendMsgParam("AddStandoffs", data);
}

public GetBillOfMaterial() {
  SendMessage("Manager", "GetBillOfMaterials", "alert");
}

public testFunction(input: string) {
  alert(input);
}

sendMsgParam(functionName: string, params: any) {
  SendMessage("Manager", functionName, params);
}

sendMsg(functionName: string) {
  SendMessage("Manager", functionName);
}
}

我基本上需要能够使用 Application.ExternalCall() 或任何可以工作的函数从 Unity 调用上述服务内部的“TestFunction”。
如果有任何进一步的说明，请告诉我。

谢谢！

【问题讨论】：

testFunction 位于 Angular 模块中，因此猜测可能类似于 Application.ExternalCall("UnityService.testFunction","Hello angular");。
@NewDeveloper 这取决于你的角度模块是什么可用的——这只是基于你的导出行的猜测。也许试着这样想：你需要在网页上的 JS 控制台中放入什么来使 testFunction 运行？ => 把它放在 ExternalCall 中。
@NewDeveloper 是的；您需要全局公开 testFunction（因此您可以从“任何地方”调用它，例如通过 JS 控制台或 Unity）。 Angular 模块在设计上是私有的（全局不可用），因此在设置模块期间（在 init 函数中），您必须将其作为全局变量捕获。由于这种私有设计，Angular 会做出一堆假设（通过全局调用它会破坏这些假设），因此您还必须手动调用 apply 方法以确保您的 Angular 模块上的任何更改都是最新的。
我不太喜欢 Angular，但希望这有助于描述这些答案的作用，以便您可以根据需要将其应用于您的模块 :)
非常感谢您的建议。感谢您的帮助，我发布了有效的解决方案！这是克服的巨大障碍哈哈

标签： c# angular unity3d web unity-webgl

【解决方案1】：

我实际上已经为任何对解决方案感兴趣的人解决了这个问题。

按照这个 SO 问题的示例：Angular2 - how to call component function from outside the app

我已将“GetBillOfMaterial”的服务功能更新为如下所示：

constructor(
 private colorService: ColorService
,private finishService:FinishService  
,private circuitService: CircuitService
,private standoffService: StandoffService
,private ngZone:NgZone) { }

public GetBillOfMaterial{
  if(!this.isConfigured) {
    this.isConfigured = true;
    window.my = window.my || {};
    window.my.namespace = window.my.namespace || {};
    window.my.namespace.publicFunc = this.PubFunc.bind(this);
  }
  SendMessage("Manager", "GetBillOfMaterials", "window.my.namespace.publicFunc");
}

public PubFunc(input: string) {
  this.ngZone.run(() => this.testFunction(input));
}

public testFunction(input: string) {
  alert(input);
}

上述解决方案将允许您从统一的模块/服务调用任何 angular2 函数，同时仍使用“Application.ExternalCall()”方法。

【讨论】：