Angular2:如何按特定顺序调用@Input setter?
Angular2: How to have @Input setters called in certain order?
我正在创建一个组件。因为我喜欢 Apache Wicket 的做事方式,所以我试图模仿 IModel
传递数据的方式。为此,我向子组件传递了一个模型和可以提取相关值的回调,而不是调用一个函数来预先获取数据。
问题是,新设置模型的处理使用了回调。
因此,如果在设置回调之前调用模型 setter,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
class 成员的顺序,sets/calls 他们也是如此。问题是,这是事实上的还是法律上的?我不想依赖仅仅因为它当前以这种方式编码而起作用的功能。我不太了解 JavaScript 反射,所以我不知道这是否适用于任何地方。
您可以使用 ngOnChanges()
,每次通过更改检测更新 @Input()
时都会调用它。您可以在 ngOnChanges
内检查是否所有输入值都已可用,然后执行您的代码。
不过您需要自己小心,后续更新不会再次触发函数调用(以防万一这不是您想要的)。
更新
绑定的顺序(值绑定和事件绑定)在 Angular2 中未定义,因此您不能依赖特定的顺序。
我正在创建一个组件。因为我喜欢 Apache Wicket 的做事方式,所以我试图模仿 IModel
传递数据的方式。为此,我向子组件传递了一个模型和可以提取相关值的回调,而不是调用一个函数来预先获取数据。
问题是,新设置模型的处理使用了回调。
因此,如果在设置回调之前调用模型 setter,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
class 成员的顺序,sets/calls 他们也是如此。问题是,这是事实上的还是法律上的?我不想依赖仅仅因为它当前以这种方式编码而起作用的功能。我不太了解 JavaScript 反射,所以我不知道这是否适用于任何地方。
您可以使用 ngOnChanges()
,每次通过更改检测更新 @Input()
时都会调用它。您可以在 ngOnChanges
内检查是否所有输入值都已可用,然后执行您的代码。
不过您需要自己小心,后续更新不会再次触发函数调用(以防万一这不是您想要的)。
更新
绑定的顺序(值绑定和事件绑定)在 Angular2 中未定义,因此您不能依赖特定的顺序。