Question

我正在尝试学习Angular 2，并试图找出实现变更检测功能的最佳方法。基本上我有这样的组件结构：

<parent-component>
    <child-component [input]="getData(1) | async"></child-component>
    <child-component [input]="getData(2) | async"></child-component>
</parent-component>

我想要做的是检测子组件的输入何时在同一摘要周期中更新，然后调用父组件类中的某个函数。通过这种方式，我可以使用父组件一次处理多个更改，而不是一次一个地处理每个更改。有可能这样做吗？

Answer 1

将它们与zip或combineLatest结合起来

在组件中：

//now filtering out falsey values for getData
// make it .filter(v => v !== undefined) to ignore undefined specifically
dataOne$ = getData(1).filter(v => v);
dataTwo$ = getData(2).filter(v => v);

combined$ = Observable.zip(dataOne$, dataTwo$).do(e => console.log('do whatever you want here');

或者：

combined$ = Observable.combineLatest(dataOne$, dataTwo$).do(e => console.log('do whatever you want here');

模板中的

：

<parent-component *ngIf="combined$ | async as combined">
  <child-component [input]="combined[0]"></child-component>
  <child-component [input]="combined[1]"></child-component>
</parent-component>

或者可能：

<parent-component >
  <child-component *ngFor="let input of combined$ | async" [input]="input"></child-component>
</parent-component>

第一个将使父级和子级仅在组合至少解析一次时实例化。

第二个将立即让父实例化，但子项将不会实例化，直到两个项都解析一次。

第一个选项有一个微妙的好处，因为如果使用onpush更改检测，父组件的更改检测将在每次在异步更新中订阅的observable时触发，在第二种情况下不会，但在第二种情况下，无论如何，操作员总是会开火。

只有两个observable都更新时才会触发

zip，并为您提供成对的值

combineLatest每当其中一个触发时都会触发（两者都触发一次）并从另一个中获取最新值。

Answer 2

您可以使用ngAfterViewChecked生命周期钩子。所有挂钩都是变更检测的一部分，如Everything you need to know about change detection in Angular中所述。当Angular运行对当前组件的更改检测时，子组件的绑定更新将作为第一个操作执行。 ngAfterViewChecked是当前视图组件的更改检测完成时触发的挂钩。

Answer 3

在.ts文件中设置变量

var data1;
var data2;

constructor()
{
  getData1().then((d)=>{data1=d})
  getData2().then((d)=>{data2=d})
}

你的HTML中的

<parent-component>
    <child-component *ngIf="data1 && dat2" [input]="getData(1) | async"></child-component>
    <child-component *ngIf="data1 && dat2" [input]="getData(2) | async"></child-component>
</parent-component>

Answer 4

在父组件中构建AND函数。这假设您的子组件上的@Outputs在提交输入时触发事件。

<parent-component>
<child-component (submitted)="increaseState()" [input]="getData(1) | async"></child-component>
<child-component (submitted)="increaseState()" [input]="getData(2) | async"></child-component>
</parent-component>

父母.ts

state = 0;

increaseState(){
this.state++
}

function()    {
  if(state === 2)   {
     *process values*
   }
}

如何等待子组件的多个输入更改？

4 个答案: