返回一个在Angular应用中使用的Rust-Wasm向量。

huangapple go评论106阅读模式
英文:

return a rust-wasm vector in angular application

问题

我有一个基本的Angular应用和一个Rust wasm包,我想在Angular中调用Rust编译的代码中的函数。
Rust代码模板来自于lib.rs中的rust-pack-template-repo

  1. mod utils;
  2. use wasm_bindgen::prelude::*;
  3. #[wasm_bindgen]
  4. pub fn add_one(number: u32) -> u32
  5. {
  6. number + 1
  7. }
  8. #[wasm_bindgen]
  9. pub fn test_vec_output(num_samples: u32) -> Vec<u32>
  10. {
  11. let my_vec: Vec<u32> = vec![12; num_samples as usize];
  12. my_vec
  13. }

在Angular应用中,我使用了以下代码样本来调用Rust-wasm函数:

  1. async testRustWasmFunctions()
  2. {
  3. import('../wasm-test-pack/pkg/myDummyPackage_bg.wasm').then((response) => {
  4. this.myFirstResult = response.add_one(1);
  5. console.log("Test dummy add: " + this.myFirstResult); // 正常工作!返回2
  6. console.log("Test dummy vector: " + response.test_vec_output(1)); // 只有在我传入两个参数时才起作用
  7. });
  8. }

在HTML部分,函数被这样调用:

  1. <button (click)="testRustWasmFunctions()"></button>

response.test_vec_output(1)函数调用在传入两个参数时不会产生错误(在Angular中),但控制台结果返回undefined。而add_one函数正常工作并返回正确的结果。

有没有更好的方法来将Rust-wasm包导入到Angular中,以便更容易处理向量?

英文:

I have a basic angular app and a Rust wasm pack, and I want to call functions in the Rust compiled code in angular.
The rust code template is taken from the rust-pack-template-repo in lib.rs is the following:

  1. mod utils;
  2. use wasm_bindgen::prelude::*;
  3. #[wasm_bindgen]
  4. pub fn add_one(number: u32) -&gt; u32
  5. {
  6. number + 1
  7. }
  8. #[wasm_bindgen]
  9. pub fn test_vec_output(num_samples: u32) -&gt; Vec&lt;u32&gt;
  10. {
  11. let my_vec: Vec&lt;u32&gt; = vec![12; num_samples as usize];
  12. my_vec
  13. }

In the Angular app side, I used the following code sample to call the rust-wasm function:

  1. async testRustWasmFunctions()
  2. {
  3. import(&#39;../wasm-test-pack/pkg/myDummyPackage_bg.wasm&#39;).then((response) =&gt; {
  4. this.myFirstResult = response.add_one(1);
  5. console.log(&quot;Test dummy add: &quot; + this.myFirstResult); // Works fine !! returns 2
  6. console.log(&quot;Test dummy vector: &quot; + response.test_vec_output(1,1)); // Only works if I take two arguments
  7. });
  8. }

In the HTML part the function is called like this:

  1. &lt;button (click)=&quot;testRustWasmFunctions()&quot;&gt;&lt;\button&gt;

The response.test_vec_output(1,1)) function call returns no error (in angular) when called with two arguments, and the console result returns undefined. While the function add_one works just fine and returns the correct result.

Is there a better way to import rust-wasm pack to angular than this, such that it is easy to process vectors?

答案1

得分: 1

wasm-bindgen生成一个js文件(应该被称为myDummyPackage.js),该文件负责设置一堆东西(如堆和包装器)。

您可以尝试导入生成的.js文件,如果不起作用,我建议查看以下教程:

  • 这个教程以获取一个ES模块(应该使用wasm-pack --target web

  • 这个教程用于设置webpack

英文:

wasm-bindgen generates a js file (should be called myDummyPackage.js) which is responsible for setting up a bunch of stuff (like heap and wrappers).

You can try to import generated .js file, if it doesn't work I recommend looking at these tutorials:

  • This tutorial to get an ES module (you should use wasm-pack --target web for this)

  • This tutorial to setup webpack

答案2

得分: 0

  1. #[wasm_bindgen]
  2. pub fn test_vec_output(num_samples: u32) -> js_sys::Uint32Array {
  3. let my_vec: Vec<u32> = vec![12; num_samples as usize];
  4. return js_sys::Uint32Array::from(&my_vec[..]);
  5. }
英文:

You likely need to convert your Vec&lt;u32&gt; to a js_sys::Uint32Array. So your test_vec_output would look like:

  1. #[wasm_bindgen]
  2. pub fn test_vec_output(num_samples: u32) -&gt; js_sys::Uint32Array {
  3. let my_vec: Vec&lt;u32&gt; = vec![12; num_samples as usize];
  4. return js_sys::Uint32Array::from(&amp;my_vec[..]);
  5. }
  6. </details>

huangapple
  • 本文由 发表于 2023年7月24日 16:20:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76752603.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定