Question

我对angular非常陌生。尽管我做了很多尝试，但我不理解一些代码片段。谁能解释下面的三个功能如何与输入，输出和主体一起工作。

private _rowClass: (row: T) => {[key: string]: boolean} = _ => {return {};};

  @Input() public set rowClass(func: (row: T) => {[key: string]: boolean}) {
    this._rowClass = func;
  }

  public get rowClass(): (row: T) => {[key: string]: boolean} {
    if (this.condition) {
      return _ => {return {};};
    }
    return this._rowClass;
  }

    @Input()
    public set rows(value: T[]) {
        this._rows = value
       }

在模板中

  <ngx-datatable
    [rowClass]="rowClass"
    [rows]="rows"
     >

Answer 1

首先，我不得不说这段代码非常丑陋并且违反任何干净的代码规则。

TL; DR：Arrow functions是有助于保持this范围不受父级影响的函数表达式。但是在这里使用它们是因为您必须在现代JavaScript / TypeScript中更喜欢箭头功能。

private _rowClass: (row: T) => {[key: string]: boolean} = _ => {return {};};

此行定义了一个使用变量名_作为参数的方法。变量_rowClass现在是一个函数_ => {return {}} 等于function (_) {return {};}。警告：变量名称_不好。使用a-zA-Z0-9作为变量名。顺便说一句参数_未使用，可以删除。

请注意，:之后的代码例如_rowClass: <THIS>只是TypeScript中的类型。类型为(row: T) => {[key: string]: boolean}，这意味着它是带有泛型类型参数row: T的方法（您可以传递任何类型），返回值是带有布尔值的任何属性键的对象。 [key: string]: boolean

public get rowClass(): (row: T) => {[key: string]: boolean} {

只有具有相同类型定义的吸气剂get才能返回_rowClass，或者在这种情况下，如果this.condition为true，它将返回方法{{1 }}。

这是JavaScript的简化版本。我删除了复杂的TypeScript类型以保持其清洁。只是在这里演示。

_ => {return {}}

了解打字稿，角度箭头功能

1 个答案: