Question

我有一个我订阅的服务，比如说一个组件。我在A组件中有一种方法，每隔5分钟订阅一次该服务。

A组件具有子组件，比方说B组件。我使用@Input（）并获取B组件中的数据。此外，B组件具有子C组件。 C组件显示消息。我需要获取每隔5分钟订阅该服务后发生的数据更改，并将它们放在B组件中，该B组件将调用C组件。

我需要在A组件中进行服务调用，因为那里也需要完成一些逻辑。如果服务调用发生在B组件中，我想知道如何观察子组件中的数据更改。

我尝试使用计时器，管道和switchMap以避免使用间隔，并使服务订阅每5分钟发生一次，并从A和B组件中调用该服务。
此外，我尝试使用ViewChild（）并在A组件中调用B组件的ngOnInit，但这给我一个错误：

无法在SafeSubscriber上读取undefined的属性ngOnInit（）...

，但仍会在订阅时调用。

继续第二点，如果我将C的ngOnInit调用为B ...，我会得到一个跨源策略错误。
我尝试以与A类似的方式在B组件中订购服务，并且尝试将数据更改输出到A。但是，这似乎也不起作用。如果这是一个更好的主意，那么真的很想知道如何观察孩子的数据变化。

组件：

    ngOnInit() {
           this.method();
           this.interval = setInterval(()=>this.method(), 300000);
    }

    method() {
           // service subscription
    }


    ngOnDestroy(){
            clearInterval(this.interval);
    }

Acomponent.html：

    <Bcomponent [data]='data'></BComponent>

BComponent：

      @Input() data: any;

      ngOnInit() {
               this.method(); 
      }

      method() {
             // method to be executed
      }

BComponent.html：

       <Ccomponent [datafromBmethod]='datafromBmethod'></Ccomponent>

Ccomponent：

      @input() datafromBmethod: any;

      ngOnInit() {
               // display message logic
      }

Answer 1

Karan，事情不是你问的那样。您不必每次都指定服务。假设您有一个带有方法getData的服务DataService。如果要每隔x秒获取一次此数据，则可以使用switchMap将onInit设置为计时器。为了取消怀疑，我使用takeWhile，但变量为true时，ngOnDestroy中的结果为false

 timer(0,1000).pipe(takeWhile(()=>this.alive),
                  switchMap(()=>{
                    return this.dataService.getData()
                  })).subscribe(res=>{
                    this.value=res;
                  })

变量“ this.value”每1个secons更改一次。您可以使用输入将该变量传递给b，也可以使用输入将变量从b传递给c。

注意：我使用运算符“ of”返回一个可观察的对象，通常该服务变为

  getData()
  {
    return this.httpClient.get(.....)
  }

您还可以在服务中添加一个主题，在应用程序组件的计时器中发送一条消息并按可观察的方式订阅该主题

您的组件A变得像

 timer(0,1000).pipe(takeWhile(()=>this.alive),
              switchMap(()=>{
                return this.dataService.getData()
              })).subscribe(res=>{
                this.dataService.putMessage("I send "+res);
              })

在组件c中，您拥有

this.dataService.dataObservable.subscribe(res=>{
   this.message=res;
})

您可以在stackblitz

中看到两种情况的示例

观察数据从父级到子级的变化，反之亦然

1 个答案: