0

我想在 Angular 组件上运行 wasm imgui 文件，这是菜单选项卡的内容之一。Wasm 直接基于此：https ://github.com/ocornut/imgui/tree/master/examples/example_emscripten_opengl3

组件：

wasm-app-components.ts

import { Component, OnInit } from '@angular/core';
import { get } from 'scriptjs';

@Component({
  selector: 'app-wasm-app',
  templateUrl: './wasm-app.component.html',
  styleUrls: ['./wasm-app.component.scss']
})

export class WasmAppComponent implements OnInit {

  constructor() {}


  ngOnInit(): void {
    console.log('init');
    get("assets/index.js", () => {
        console.log("index loaded");
    });
    get("assets/runIndex.js", () => {
        console.log("run index loaded");
        
    });


  }
}

wasm-app.component.html

<canvas class="emscripten" id="canvas" ></canvas>

脚本（我将从 runIndex.js 开始，因为它只是由 emscripten html 文件生成的那个）：

var Module = {
  preRun: [],
  postRun: [],
  print: (function() {
      return function(text) {
          text = Array.prototype.slice.call(arguments).join(' ');
          console.log(text);
      };
  })(),
  printErr: function(text) {
      text = Array.prototype.slice.call(arguments).join(' ');
      console.error(text);
  },
  canvas: (function() {
      var canvas = document.getElementById('canvas');
      //canvas.addEventListener("webglcontextlost", function(e) { alert('FIXME: WebGL context lost, please reload the page'); e.preventDefault(); }, false);
      return canvas;
  })(),
  setStatus: function(text) {
      console.log("status: " + text);
  },
  monitorRunDependencies: function(left) {
      // no run dependencies to log
  }
};
window.onerror = function() {
  console.log(event);
};

第二个是由 Emscripten js 文件生成的（大约 7000 行），但老实说，我不想修改它。如果您想查看它的外观，只需生成它（页面顶部的链接）。

问题是 wasm 仅在第一个条目上生成。在第二个条目我有一个错误：

Uncaught TypeError: Cannot read property 'emscripten_stack_get_end' of undefined

我想以某种方式撤消 onInit 方法发生的所有事情。我试图将它包装在容器 div 中并删除子 onDestroy，但这不起作用。

这是“紧急解决方案”：

initWasm(){
    get("assets/index.js", () => {
      console.log("index loaded");
    });
    get("assets/runIndex.js", () => {
      console.log("run index loaded");
    });
  }

  delay(ms: number) {
    return new Promise( resolve => setTimeout(resolve, ms) );
  }

  ngOnInit(): void {
    (async () => { 
      await this.delay(5000);
      this.initWasm();
  })();

但它仍然不是我正在寻找的解决方案。最后最令人满意（但不完美）的是使用 href 而不是 routerLink。

4

0 回答 0