typescript 如何防止在Angular 模板表达式中使用函数调用

uxh89sit 于 2022-11-26 发布在 TypeScript

关注(0)|答案(2)|浏览(162)

我有一个子组件，它从父组件获取一个年份列表，如果列表包含当前年份，则需要对元素进行样式化。

子ts：

export class ChildComponent implements OnInit {
  @Input() listYears: Array<number> = [];
  year = 2022;
  constructor() { }

  ngOnInit(): void {
  }

  existInList() {
    return this.listYears.find(x => x === this.year);
  }

}

子HTML：

<div [style.background-color]="existInList() ? 'red' :  'blue' ">
  </div>

和父html：

<app-child [listYears]="[2022]"></app-child>

因为样式的条件使用了一个方法，建议不要在Angular模板表达式（never use function calls in Angular template）中使用函数调用，所以如果没有函数调用，我该如何实现呢？
我假设在模板中而不是在ts中插入条件，如下所示：

<div [style.background-color]="listYears.find(x => x === year) ? 'red' :  'blue' ">
  </div>

对性能没有影响。我说错了吗？如果没有--写的方式是什么？
谢谢

typescript

来源：https://stackoverflow.com/questions/74546844/how-to-prevent-using-function-calls-in-angular-template-expressions

2条答案

按热度按时间

b1zrtrql1#

当然，您的解决方案是使用Angular Pipe。Here是指向docs的链接。
管道正是为此而维护的，以便以一种智能和性能考虑的方式转换模板上的数据。
您的pipe将如下所示：

@Pipe({
    name: 'existInList'
})
export class ExistInListPipe implements PipeTransform {
    transform(listYears: number[], year: number): string {
        return listYears.find((x) => x === year) ? 'red' :  'blue';
    }
}

在您的模板中：

<div [style.background-color]="listYears | existInList : year">
  </div>

赞(0）回复(0）举报 2022-11-26

v1l68za42#

我建议使用setter方法沿着HostBinding。

@Component({
  selector: 'hello',
  template: `<h1>Hello!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent {
  private _listYears: number[];
  yearToStyle: number = 2022;

  @HostBinding('style.color')
  background: string;

  @Input()
  set listYears(value: number[]) {
    this._listYears = value;

    this.background = value.includes(this.yearToStyle) ? 'red' : 'blue';
  }
}

堆栈 lightning 战：https://stackblitz.com/edit/angular-ivy-4hgtdn?file=src/app/hello.component.ts

赞(0）回复(0）举报 2022-11-26

我来回答

typescript 如何防止在Angular 模板表达式中使用函数调用

2条答案

相关问题

热门标签

最新问答