Angular2:如何按特定顺序调用@Input setter?

时间:2017-02-21 04:08:20

标签: angular typescript components angular2-custom-component

我正在创建一个组件。由于我喜欢Apache Wicket的做事方式,我试图模仿IModel传递数据的方式。为此,我向子组件传递一个模型和回调,它可以提取相关值,而不是调用函数来预先获取数据。

问题是,新设置的模型的处理使用回调。 因此,如果在设置回调之前调用模型设置器,Angular会崩溃 解决方法:将需要回调的操作推迟到ngAfterViewInit()等。

简而言之:

  • 如何控制@Inputs的设置顺序?
  • 我可以依赖源代码中的订单吗?

示例:(此处更改订单似乎可以完成工作)

@Input()
valueCallback: (item: any) => string
    = app => { throw new Error("valueCallback not yet defined."); };

@Input()
labelCallback: (item: ItemType) => string;

使用该子组件的模板:(此处更改订单不会更改订单)

            <wu-checkboxes [groupName]="'includedApps'"
                           [options]="availableApps"
                           [valueCallback]="appsValueCallback"
                           [labelCallback]="appsLabelCallback"
            >

正如我上面提到的,Angular2似乎遵循@Input类成员的顺序,并按顺序设置/调用它们。问题是,这是事实还是法律上的?我不想依赖那些可行的功能,因为它目前以这种方式编码。我对JavaScript的反思知之甚少,所以无法判断这是否会在任何地方发挥作用。

1 个答案:

答案 0 :(得分:4)

您可以使用每次ngOnChanges()更改检测时调用的@Input()。您可以在ngOnChanges内查看是否所有输入值都已可用,然后执行您的代码。 您需要自己照顾,后续更新不会再次触发函数调用(如果不需要)。

<强>更新

绑定的顺序(值绑定和事件绑定)在Angular2中是未定义的,因此您不能依赖于特定的顺序。