如何在Svelte中使用类似RXJs Subject的存储变量

Question

如何在Svelte中使用类似RXJs Subject的存储变量？您可以在Svelte中使用前缀为$的Subject变量。但当您将变量绑定到输入时，它会抛出一个异常："；错误：name.set不是函数"；因为Subject类型没有set方法。

Answer 1

您可以在Svelte中使用RxJs-Subject作为存储变量，如下例所示。

<script>
import {Subject} from "rxjs";

let name = new Subject();
setTimeout(()=>{name.next("text")}, 1000);
</script>
<h1>Hello {$name}!</h1>

但是，如果您尝试将name变量与bind指令一起使用，它将抛出异常："；错误：name.set不是一个函数；。

<script>
import {Subject} from "rxjs";

let name = new Subject();
$: console.log($name);  
</script>
<h1>Hello {$name}!</h1>
<input bind:value={$name} />

要解决这个问题，您可以通过一个简单的技巧向Subject类添加一个set方法：(。

<script>
import {Subject} from "rxjs";

Subject.prototype.set = function (value) {
this.next(value);
}

let name = new Subject();
$name = "Ali";
$: console.log($name);  
</script>
<h1>Hello {$name}!</h1>
<input bind:value={$name} />