如何在角度2输入上使用扩展运算符

时间:2016-09-19 21:12:54

标签: arrays angular typescript spread-syntax

所以我会经常做这样的事情

save(...keys: string[]) {
    keys.foreach(x => // save);
}

由于传播操作符,我可以通过这些方式调用此方法。

save('string1', 'string2');
save(['string1', 'string2']);
save('string');

我喜欢这种行为,但我有一个案例,我在一个组件上有一个@input,我想以同样的方式行事。有时我想给它一个项目,有时我想给它一个数组。如何应用这种语法? 我希望能够做到这样的事情。

@Input() ...myClass: ClassBase[] = [];

和这样的用法。

// ts
currentClass = new ClassBase();
conflictingClasses = [new ClassBase(), new ClassBase()];

// html
<my-component [myClass]="currentClass"></my-component>
<my-component [myClass]="conflictingClasses"></my-component>

我怎样才能得到这种行为?我们已经在几个地方使用过这个组件,但我们只给它一个项目,我不想大规模重构来改变这个组件以获取一系列项目。

谢谢!

1 个答案:

答案 0 :(得分:2)

  

由于传播操作符,我可以通过这些方式调用此方法。

不,你的问题的前提是错误的。您必须使用n个字符串参数调用它。字符串数组string[]不是一回事。如下所示:

function save(...keys: string[]) {
    keys.forEach(x => /** save */);
}


save('string1', 'string2'); // OKAY
save('string'); // OKAY 
save(['string1', 'string2']); // ERROR !

请作为一个不同的问题,而不是编辑它,因为它可能会在编辑后得到很多关注。 PS:玩得开心,保持快乐!