Question

我创建了一个简单的服务texts-data.service.ts

selectedTextNumber:number = 1;
  constructor() {
    setInterval(()=>{
      this.selectedTextNumber = 0;
      console.log("chans: "+this.selectedTextNumber);

    },2000);
}
  getCurrentTextNumber(){
    return this.selectedTextNumber;
  }

我在其他组件中使用它：other.component.ts

    import { TextsDataService } from "../../services/texts-data.service";
    export class OtherComponent implements OnInit {

    fontName:string;

    constructor(public textsDataService: TextsDataService) {
    this.selectedTextNumber = textsDataService.getCurrentTextNumber();
    let currentFont = textsDataService.allTexts[this.selectedTextNumber];
    this.fontName = currentFont.fontName;
    }

一旦服务数据发生变化，我就有兴趣更新视图。就我而言，它会在2秒后发生变化，但视图永远不会更新。如何让它自己刷新？

HTML：

<input type="text" class="form-control" aria-label="Text input with dropdown button" value="{{fontName}}">

Answer 1

看起来您想要使用行为主题。行为主体既可以监视更新，也可以订阅数据流。您将导入'rxjs/BehaviorSubject"并创建一个新行为主题的变量，然后您将该行为的值设置为数据流。

您可以看到实时实施here

您可以在rxjs行为主题there

上查看文档

Answer 2

更好的方法是从Component类本身轮询服务。 Here我有一个非常好的例子可以帮助你。

Answer 3

要从服务更新视图，您必须再次调用该服务。

但是，您的HTML没有NgModel，因此它不会通过该按钮更新任何内容。

Answer 4

一个简单的解决方案是使selectedTextNumber成为一个getter。

您不会在代码段中显示selectedTextNumber的声明，而是将此声明替换为：

get selectedTextNumber(): number {
    return this.textsDataService.getCurrentTextNumber();
}

这样，每次更改时，它都会从服务中重新获取值。

服务数据更改后更新视图

4 个答案: