Question

嗨，我有一个问题，它是如何工作的。我有一个2组件父和子（我只显示一段代码，因为它是我的工作项目）。

所以模板的父组件：

<product-empty [showHistoryMonth]="showHistoryMonth" [showHistoryAvg]="showHistoryAvg"
           [SP_L_FCSQData]='SP_L_FCSQData'
           [allHistoryAvgNames]="allHistoryAvgNames" [salesPlanId]="salesPlanId" [allHistoryChannels]="allHistoryChannels" [airingsNames]="airingsNames"
           [allForecastMonthChannels]="allForecastMonthChannels" [forecastShows]="displayArry"
           [allProductSummary]="allProductSummary"  ></product-empty>

和在这种情况下很重要的功能：

private displayArry: string[] = [];

getForecastDisplay(emit: any) {
        if (emit.show) {
            var index = this.displayArry.indexOf(emit.id);
            if (index === -1) {
                this.displayArry.push(emit.id);
            } else { }
        } else {
            var index = this.displayArry.indexOf(emit.id);
            this.displayArry.splice(index, 1);
        }
        this.forecastShows = emit;
        console.log('forecast show', this.displayArry);
    }

儿童组件：

export class FlexProductEmptyComponent implements DoCheck, OnInit, OnChanges {
    ...
    @Input() showHistoryMonth: boolean = false;
    @Input() showHistoryAvg: boolean = false;
    @Input() forecastShows: any;
    ...

所以问题是数据是如何通过父母和孩子传递的。现在我尝试检测孩子的父变化。编辑：当其他组件发出数据并更新displayArry时，将调用getForecastDisplay函数。所以我认为当displayArry变量被更改时，会再次传递给绑定到父级的所有子项。

我的意思是我试图捕捉父数据发生变化并将其传递给孩子的那一刻。我使用了一个setter，当我在它上面设置一个控制台日志时，它只能在init上登录。我使用OnChanges进行简单的更改，只在组件启动时记录; 但更改时的数据会传递给子组件（我知道它，因为我在doCheck中设置了一个控制台日志，并显示了正确的值）。

所以主要问题是当父组件将更改数据传递给子时，我怎么能抓住那一刻？

Answer 1

有许多方法可以在父组件和子组件之间启用通信，最明显的方法是通过input and output properties或通过服务。可观察是另一种选择。这是an example with BehaviorSubject(a special kind of Observable)。步骤如下：

＆＃39;新＆＃39;在父级中使用BehaviorSubject，我们将其命名为someRxx。
使用输入属性将BehaviorSubject传递给child，例如<my-child [nameRxx]="someRxx"></my-child>。
，使用异步管道，如<h2>Hello {{nameRxx | async}}</h2>;或者在儿童组件中，你nameRxx.subscribe(doSomething)（不要忘记在ngOnDestroy中取消订阅）
执行someRxx.next(value)，只要您.next，孩子就会收到该值。

享受。

孩子不检测父改变Angular 2

1 个答案: