Angular2 - 将 ASYNC 数据传递给子组件

Posted

技术标签:

【中文标题】Angular2 - 将 ASYNC 数据传递给子组件【英文标题】:Angular2 - pass ASYNC data to child component 【发布时间】:2017-06-01 05:25:40 【问题描述】:

我遇到了将异步数据传递给子组件的问题。我试图编写动态表单生成器。当我尝试通过 Observable 调用 json 并将其传递给子组件时,问题就开始了。

服务:

generateSearchFields2(): Observable<any> 
        return this.http
            .get(this.API + 'searchFields')
            .map((res:Response) => 
                res.json().data as any;
                for (var i = 0; i < res.json().data.length; i++) 
                    var searchField = res.json().data[i];
                    switch (searchField.component) 
                        case "TextboxQuestion": 

                            let TXQ: TextboxQuestion = new TextboxQuestion(
                                key: searchField.key,
                                label: searchField.label,
                                value: searchField.value,
                                required: searchField.required,
                                order: searchField.order
                            );
                            this.searchFieldModels.push(TXQ);
                            console.log("TXQ: ", TXQ, this.searchFieldModels);
                            break;
                        case "DropdownQuestion": 

                            let DDQ: DropdownQuestion = new DropdownQuestion(
                                key: searchField.key,
                                label: searchField.label,
                                required: searchField.required,
                                options: searchField.options,
                                order: searchField.order
                            );
                            this.searchFieldModels.push(DDQ);
                            console.log("TXQ: ", DDQ, this.searchFieldModels);
                            break;
                        default:
                            alert("DEFAULT");
                            break;
                    
                
                return this.searchFieldModels.sort((a, b) => a.order - b.order);
            )
            .catch(this.handleError);
    

组件父级:

generateSearchFields2() 
    this.service.generateSearchFields2()
      .subscribe(res => this.searchFields = res)
  

我通过父模板中的 INPUT 指令将变量传递给子模板:[searchFields]="searchFields"

问题出在子组件中,其中searchField 具有未定义的值。在这个孩子中,我将值传递给另一个服务,以创建 formContros,但我在那里也没有定义。数据缺失从这里开始,在孩子中:

@Input() searchFields: SearchBase<any>[] = [];

ngOnInit()    
    this.form = this.qcs.toFormGroup(this.searchFields);
    console.log("ONINIT DYNAMIC FORM COMPONENT: ", this.searchFields);

  

请提示我如何传递异步变量,同时不丢失数据

【问题讨论】:

【参考方案1】:

您可以让@Input() searchFields 成为二传手

private _searchFields: SearchBase<any>[] = [];
@Input() set searchFields(value SearchBase<any>[]) 
  if(value != null) 
    this.form = this.qcs.toFormGroup(this.searchFields);
    console.log("ONINIT DYNAMIC FORM COMPONENT: ", this.searchFields);
  


get searchFields() : SearchBase<any>[] 
  return this.searchFields;

您也可以使用ngOnChanges(),每次更新输入时都会调用它,但设置器通常更方便,除非执行的代码依赖于设置的多个输入。

【讨论】:

你能解释一下setter和ngOnChanges()的区别吗?【参考方案2】:

ngOnInit 事件中,来自parentdata 尚未绑定。所以你的searchFieldsundefined。您可以在NgAfterViewInit 组件生命周期事件中使用它。

@Input() searchFields: SearchBase<any>[] = [];

ngAfterViewInit()    
    this.form = this.qcs.toFormGroup(this.searchFields);
    console.log("ONINIT DYNAMIC FORM COMPONENT: ", this.searchFields);

其他情况可以查看Angular2 Component Lifecycle events

【讨论】:

以上是关于Angular2 - 将 ASYNC 数据传递给子组件的主要内容,如果未能解决你的问题,请参考以下文章

将异步获取的数据传递给子道具

使用 ngOnChanges 将异步数据传递给子组件不起作用

如何将数据传递给子 UINavigationController?

在准备 segue 时,如何将数据传递给子 UIViewController?

Android:如何将数据传递给子活动?

如何推迟将 Ajax 数据传递给子组件?