Angular2:如何以某种顺序调用@Input setter?

Ond*_*žka 11 components typescript angular2-custom-component angular

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

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

简而言之:

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

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

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

@Input()
labelCallback: (item: ItemType) => string;
Run Code Online (Sandbox Code Playgroud)

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

            <wu-checkboxes [groupName]="'includedApps'"
                           [options]="availableApps"
                           [valueCallback]="appsValueCallback"
                           [labelCallback]="appsLabelCallback"
            >
Run Code Online (Sandbox Code Playgroud)

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

Gün*_*uer 7

您可以使用ngOnChanges()每次@Input()通过变更检测更新an时调用的方法。您可以检查ngOnChanges所有输入值是否已经可用,然后执行代码。不过,您需要注意自己,以后的更新不会再次触发函数调用(以防万一)。

更新

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

  • 此问题如下所示:https://github.com/angular/angular/issues/40007。他们同意您不应依赖这些绑定的顺序 (2认同)
  • 尽管您不应该依赖输入绑定顺序,但如果您将一个放在另一个之前,则确实很重要。我注意到第一个输入绑定将在第二个输入绑定之前初始化。 (2认同)