Angular 2 - 在父组件初始化后将数据传递给子组件

我有一个父组件，通过服务从服务器获取数据。我需要将其中的一些数据传递给子组件。

我一直试图用通常的@Input()来传递这些数据，但是正如我所预料的，我在子组件中得到的数据是undefined。

示例

父组件

@Component({
    selector: 'test-parent',
    template: `
        
    `
})
export class ParentComponent implements OnInit {
    data: any;
    ngOnInit() {
        this.getData();
    }
    getData() {
        // 调用服务并获取数据
        this.testService.getData()
            .subscribe(res => {
                this.data = res;
            });
    }
}

子组件

@Component({
    selector: 'test-child',
    template: `
        
    `
})
export class ChildComponent implements OnInit {
    @Input() childData: any;
    ngOnInit() {
        console.log(childData); // 输出undefined
    }
}

我保持示例简单，以展示我的意图。我的问题是是否可能在初始化之后将数据传递给子组件。我不确定，但是双向数据绑定是否有助于解决这个问题？

更多调查

根据已发布的答案，我尝试使用ngOnChanges生命周期钩子。我遇到的问题是当数据更新时，ngOnChanges函数不会触发。我认为这是因为数据是一个对象，所以改变没有被检测到。

子组件中更新后的代码

@Component({
    selector: 'test-child',
    template: `
        
    `
})
export class ChildComponent implements OnChanges {
    @Input() childData: any;
    ngOnChanges() {
        console.log(childData); // 输出undefined
    }
}

我尝试了一下Angular团队展示生命周期钩子的Plunker上的实时例子。在测试中，我更新了OnChangesComponent以传递一个对象，正如例子中所示，当更新一个对象时，ngOnChanges没有检测到更改。(这也在这个问题中显示出来)

https://plnkr.co/edit/KkqwpsYKXmRAx5DK4cnV

似乎ngDoCheck可以帮助解决这个问题，但我认为从长远来看，这不会提高性能，因为每次更改都会被这个生命周期钩子检测到。

我也知道我可能可以使用@ViewChild()来访问子组件并设置我需要的变量，但是我认为对于这个用例来说，这并没有太多意义。

发布更多代码以更好地解释

父组件

@Component({
    selector: 'test-parent',
    template: `
        
            
        
        
            
        
        提交选择
    `
})
export class ParentComponent implements OnInit {
    data: any;
    numbersData: any;
    lettersData: any;
    ngOnInit() {
        this.getData();
    }
    getData() {
        // 调用服务并获取游戏选择的数据
        this.testService.getData()
            .subscribe(res => {
                this.data = res;
                setChildData(this.data);
            });
    }
    setChildData(data: any) {
        for(let i = 0; i < data.sections.length; i++) {
            if(data.sections[i].type === 'numbers') {
                this.numbersData = data.sections[i];
            }
            if(data.sections[i].type === 'letters') {
                this.lettersData = data.sections[i];
            }
        }
    }
    pickNumber(pickedNumbers: any[]) {
        this.pickedNumbers = pickedNumbers;
    }
    pickLetter(pickedLetters: any[]) {
        this.pickedLetters = pickedLetters;
    }
    submitSelections() {
        // 调用服务提交选择
    }
}

子组件

@Component({
    selector: 'test-child',
    template: `
        
    `
})
export class ChildComponent implements OnInit {
    @Input() childData: any;
    @Output() onSelection = new EventEmitter;
    pickedItems: any[];
    // 用于点击事件
    pickItem(item: any) {
        this.pickedItems.push(item.number);
        this.onSelection.emit(this.pickedItems);
    }
}

这大致是我拥有的代码。基本上，我有一个父组件处理子组件的选择，然后我将这些选择提交给服务。我需要将某些数据传递给子组件，因为我试图使子组件返回的对象格式符合服务的期望。这样做可以帮助我避免在父组件中创建服务所期望的整个对象。此外，它使得子组件在发送回服务所期望的内容方面具有重用性。

更新

我很感激用户仍然在这个问题上发布答案。请注意，上面发布的代码对我有用。我遇到的问题是在一个特定的模板中有一个拼写错误，导致数据为undefined。

希望它能对你有所帮助 🙂