如何在 Svelte 中使用 RXJs 主题之类的存储变量

Question

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

Answer 1

您可以在 Svelte 中将 RxJs 主题用作存储变量，如下例所示。

<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} />

要解决这个问题，您可以通过一个简单的技巧将 set 方法添加到 Subject 类:)。

<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} />