具有 set Input() 任何类型的可重用组件是一个好习惯吗?
Posted
技术标签:
【中文标题】具有 set Input() 任何类型的可重用组件是一个好习惯吗?【英文标题】:Reusable component with set Input() any type is a good practice? 【发布时间】:2019-10-22 14:42:20 【问题描述】:我创建了一个可重用的组件,它采用类型为 any 的元素列表。他处理这些元素,并在按下按钮的情况下返回他得到的列表的状态。我担心在这种情况下会丢失打字。这是一个安全的解决方案吗?我希望组件可重用。是否可以从任何类型动态转换为不同的类型?
我尝试在 set Input() 中投射对象,但这是不可能的
export class ReusableTableComponent
@Input() list: any[];
@Output() selectedItems: EventEmmiter = new EventEmmiter<any>;
selectedItemsList: any[] = [];
emitChanges()
this.selectedItems.emit(this.selectedItemsList)
问题是,eventEmmiter 返回的是对象类型而不是特定类型。
【问题讨论】:
【参考方案1】:您可以使用泛型类型:
export class ReusableTableComponent
@Input() list: T[];
@Output() selectedItems: EventEmmiter = new EventEmmiter<T>;
selectedItemsList: T[] = [];
emitChanges()
this.selectedItems.emit(this.selectedItemsList)
在此处阅读有关 TypeScript 中泛型类型的更多信息: https://www.typescriptlang.org/docs/handbook/generics.html
【讨论】:
谢谢,但我如何将类型传递给专利组件的输入? ***.com/questions/46893991/… 中有一个关于您的问题的有趣讨论,但我不知道是否与您的问题有关【参考方案2】:是的,你可以在 Typescript 中使用动态类型
export class ReusableTableComponent<LIST, EVENTLIST>
@Input() list: LIST[];
@Output() selectedItems: EventEmmiter = new EventEmmiter<EVENTLIST>;
selectedItemsList: EVENTLIST[] = [];
emitChanges()
this.selectedItems.emit(this.selectedItemsList)
【讨论】:
好的,但我如何从父组件通过输入传递类型? [list]="objects[]" 不工作 你能创建一个stackblitz吗 我现在不能,在手机上写字 @Blackboy 这里是关于如何创建组件并传入类型的堆栈闪电,stackblitz.com/edit/angular-9vj13j以上是关于具有 set Input() 任何类型的可重用组件是一个好习惯吗?的主要内容,如果未能解决你的问题,请参考以下文章