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

Posted

技术标签:

【中文标题】如何在角度 2 输入上使用扩展运算符【英文标题】:How to use spread operator on angular 2 input 【发布时间】:2017-01-27 16:12:36 【问题描述】:

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

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】:

由于展开运算符,我可以将其称为任何这些方式。

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

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



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

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

【讨论】:

以上是关于如何在角度 2 输入上使用扩展运算符的主要内容,如果未能解决你的问题,请参考以下文章

Redux:在二维数组上使用扩展运算符

如何在打字稿元组中使用扩展运算符?

如何在 react-redux 中使用扩展运算符修改索引处的特定对象?

使用扩展运算符克隆带有数组的对象

如何提高扩展运算符的性能

如何使用扩展运算符将对象数组推入特定元素