我应该在Angular的类中编写方法作为箭头函数

Question

我应该在Angular的类中编写方法作为箭头函数在Angular中，在技术上可以将类方法编写为ES2015箭头函数，但我从未真正见过有人这样做过。以这个简单的组件为例：@Component({   selector: 'sample'})export class SampleComponent {   arrowFunction = param => {     // Do something   };   normalFunction(param) {     // Do something   }}这没有任何问题。有什么不同吗？为什么我应该或不应该使用它？

Answer 1

类箭头函数的一个很好的用例是当你想将一个函数传递给另一个组件并在函数中保存当前组件的上下文时。

@Component({

   template:`
        I'm the parent       <child-component></child-component>

  `})export class PerentComponent{

   text= "default text"
   arrowFunction = param => {
    // Do something
    // let's update something in parent component ( this)

    this.text = "Updated by parent, but called by child"
  };}@Component({

   template:`
        I'm the child component  `})export class ChildComponent{
   @Input() parentFunction;

   ngOnInit(){
      this.parentFunction.()
   }}

 <parent-component></parent-component>

在上面的例子中，child能够调用父组件的函数并且文本将被正确地更新，就好像我只是将父级更改为：

export class PerentComponent{

   text= "default text"
   arrowFunction (){
    this.text = "This text will never update the parent's text property, because `this` will be child component  "
  };}

Answer 2

只有一种情况，如果你需要进行AOT编译，你必须避免使用箭头功能，如此处所述

配置模块时，不能使用箭头功能。

❌DONT：

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { Routes, RouterModule } from '@angular/router';@NgModule({
  imports: [
    BrowserModule,
    RouterModule,
    HttpModule,
    RouterModule.forRoot([], { errorHandler: (err) => console.error(err) })
  ],
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ]})export class AppModule {}

✅做：

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { Routes, RouterModule } from '@angular/router';function errorHandler(err) {
  console.error(err);}@NgModule({
  imports: [
    BrowserModule,
    RouterModule,
    HttpModule,
    RouterModule.forRoot([], { errorHandler })
  ],
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ]})export class AppModule {}