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

Question

我有一个我在其中订阅的服务，假设一个组件。我在A组件中有一个每5分钟订阅服务的方法。

A组件具有子组件，例如B组件。我使用@input((并在B组件中获取数据。此外，A B组件具有儿童C组件。C组件显示消息。我需要获取每5分钟订阅服务后发生的数据更改，并将它们放入B组件中，以调用C组件。

我需要在A组件中进行服务调用，因为在那里也需要进行一些逻辑。如果服务呼叫发生在B组件中，我想知道如何观察儿童的数据变化。

1. 我尝试使用计时器，管道和switchmap来避免使用间隔，并使服务订阅每5分钟进行一次，并从A和B组件中调用服务。

2. 另外，我尝试使用ViewChild((并在组件中称为B组件的ngoninit，但这给了我一个错误：

   无法在SafeSubscriber上读取不确定的属性ngoninit((...

，但仍会在订阅中调用。

3. 继续第二点，如果我将C的ngoninit称为B ...我会遇到交叉起源策略错误。

4. 我尝试以与A相似的方式在B组件中订阅该服务。我试图将数据更改输出到A。但是，这似乎也不起作用。如果这是一个更好的主意，真的想知道如何观察孩子的数据变化。

acomponent：

    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的服务数据服务。如果您想在每个x秒获得此数据，则可以使用SwitchMap中的OnInit将其示为计时器。对于不介意，我使用的是变量是正确的，在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。

注意：我使用"运算符"返回可观察的，一般而言，服务变得像

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

您还可以在服务中有一个主题，在App-Component的计时器中发送消息并订阅该主题，因为可观察到C

您的组件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中看到两个情况的示例