【问题标题】:Reusable component with set Input() any type is a good practice?具有 set Input() 任何类型的可重用组件是一个好习惯吗?
【发布时间】: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 返回的是对象类型而不是特定类型。

【问题讨论】:

    标签: html angular typescript reference typescript-typings


    【解决方案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

    【讨论】:

    【解决方案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
    猜你喜欢
    • 2022-12-04
    • 2018-10-03
    • 2019-05-30
    • 2022-06-28
    • 2016-01-03
    • 2012-07-28
    • 2011-07-17
    • 1970-01-01
    • 2015-08-03
    相关资源
    最近更新 更多