Question

我想问一下有关将数据从选择器store-ngrx发送到子组件的解决方案。

只有：

public testValue;

 this.store$.select(selectorDataTest).subscribe(
        data => {
          this.testValue = data;
        }
    );

并且仅在模板中：

<child-component [testValue] = "testValue"></child-component>

我想到了async等。

Answer 1

当您使用select从存储中获取一些数据时，它会作为Observable返回（请在管道中使用select），这就是您正确订阅this.store$.pipe(select(selectorDataTest))的原因。 / p>

如果您记得退订，这种方法会更好，我为您提供两种方法：

1.
dataSubscription: Subscription;

ngOnInit() {
  this.dataSubscription = this.store$.pipe(select(selectorDataTest))
    .subscribe(data => this.testValue = data);
}

ngOnDestroy() {
  this.dataSubscription.unsubscribe();
}

2.
componentDestroyed$ = new Subject();

ngOnInit() {
  this.dataSubscription = this.store$
    .pipe(
      takeUntil(this.componentDestroyed$),
      select(selectorDataTest)
    )
    .subscribe(data => this.testValue = data);
}

ngOnDestroy() {
  this.dataSubscription.next();
  this.dataSubscription.unsubscribe();
}

在您的child-component里面

@Input() testValue: any;

所以你的方法

<child-component [testValue] = "testValue"></child-component>

也是正确的。

但是，如果您不想处理订阅，Angular会为您提供async管道。
接受一个Observable并为您订阅和取消订阅。这样，您就可以保持Observable select这样返回您，

dataTest$: Observable<any>;

ngOnInit() {
  this.dataTest$ = this.store$.pipe(select(selectorDataTest));
}

和您的parent.component.html

<child-component [testValue]="testData$ | async"></child-component>

再一次，在您的child-component内

@Input() testValue: any;

角度，将选择器存储数据发送到子组件

1 个答案: