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

Question

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

在Angular中，在技术上可以将类方法编写为ES2015箭头函数，但我从未真正见过有人这样做过。以这个简单的组件为例：

@Component({
  selector: 'sample'})export class SampleComponent {
  arrowFunction = param => {
    // Do something
  };
  normalFunction(param) {
    // Do something
  }}

这没有任何问题。有什么不同吗？为什么我应该或不应该使用它？

Answer 1

类箭头函数的一个很好的用例是当你想将一个函数传递给另一个组件并在函数中保存当前组件的上下文时。@Component({ &nbsp;&nbsp;&nbsp;template:` &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I'm&nbsp;the&nbsp;parent&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<child-component></child-component> &nbsp;&nbsp;`})export&nbsp;class&nbsp;PerentComponent{ &nbsp;&nbsp;&nbsp;text=&nbsp;"default&nbsp;text" &nbsp;&nbsp;&nbsp;arrowFunction&nbsp;=&nbsp;param&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Do&nbsp;something &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;let's&nbsp;update&nbsp;something&nbsp;in&nbsp;parent&nbsp;component&nbsp;(&nbsp;this) &nbsp;&nbsp;&nbsp;&nbsp;this.text&nbsp;=&nbsp;"Updated&nbsp;by&nbsp;parent,&nbsp;but&nbsp;called&nbsp;by&nbsp;child" &nbsp;&nbsp;};}@Component({ &nbsp;&nbsp;&nbsp;template:` &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I'm&nbsp;the&nbsp;child&nbsp;component&nbsp;&nbsp;`})export&nbsp;class&nbsp;ChildComponent{ &nbsp;&nbsp;&nbsp;@Input()&nbsp;parentFunction; &nbsp;&nbsp;&nbsp;ngOnInit(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.parentFunction.() &nbsp;&nbsp;&nbsp;}} &nbsp;<parent-component></parent-component>在上面的例子中，child能够调用父组件的函数并且文本将被正确地更新，就好像我只是将父级更改为：export&nbsp;class&nbsp;PerentComponent{ &nbsp;&nbsp;&nbsp;text=&nbsp;"default&nbsp;text" &nbsp;&nbsp;&nbsp;arrowFunction&nbsp;(){ &nbsp;&nbsp;&nbsp;&nbsp;this.text&nbsp;=&nbsp;"This&nbsp;text&nbsp;will&nbsp;never&nbsp;update&nbsp;the&nbsp;parent's&nbsp;text&nbsp;property,&nbsp;because&nbsp;`this`&nbsp;will&nbsp;be&nbsp;child&nbsp;component&nbsp;&nbsp;" &nbsp;&nbsp;};}

Answer 2

只有一种情况，如果你需要进行AOT编译，你必须避免使用箭头功能，如此处所述配置模块时，不能使用箭头功能。❌DONT：import&nbsp;{&nbsp;NgModule&nbsp;}&nbsp;from&nbsp;'@angular/core';import&nbsp;{&nbsp;BrowserModule&nbsp;}&nbsp;from&nbsp;'@angular/platform-browser';import&nbsp;{&nbsp;Routes,&nbsp;RouterModule&nbsp;}&nbsp;from&nbsp;'@angular/router';@NgModule({ &nbsp;&nbsp;imports:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;BrowserModule, &nbsp;&nbsp;&nbsp;&nbsp;RouterModule, &nbsp;&nbsp;&nbsp;&nbsp;HttpModule, &nbsp;&nbsp;&nbsp;&nbsp;RouterModule.forRoot([],&nbsp;{&nbsp;errorHandler:&nbsp;(err)&nbsp;=>&nbsp;console.error(err)&nbsp;}) &nbsp;&nbsp;], &nbsp;&nbsp;bootstrap:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;AppComponent &nbsp;&nbsp;], &nbsp;&nbsp;declarations:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;AppComponent &nbsp;&nbsp;]})export&nbsp;class&nbsp;AppModule&nbsp;{}✅做：import&nbsp;{&nbsp;NgModule&nbsp;}&nbsp;from&nbsp;'@angular/core';import&nbsp;{&nbsp;BrowserModule&nbsp;}&nbsp;from&nbsp;'@angular/platform-browser';import&nbsp;{&nbsp;Routes,&nbsp;RouterModule&nbsp;}&nbsp;from&nbsp;'@angular/router';function&nbsp;errorHandler(err)&nbsp;{ &nbsp;&nbsp;console.error(err);}@NgModule({ &nbsp;&nbsp;imports:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;BrowserModule, &nbsp;&nbsp;&nbsp;&nbsp;RouterModule, &nbsp;&nbsp;&nbsp;&nbsp;HttpModule, &nbsp;&nbsp;&nbsp;&nbsp;RouterModule.forRoot([],&nbsp;{&nbsp;errorHandler&nbsp;}) &nbsp;&nbsp;], &nbsp;&nbsp;bootstrap:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;AppComponent &nbsp;&nbsp;], &nbsp;&nbsp;declarations:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;AppComponent &nbsp;&nbsp;]})export&nbsp;class&nbsp;AppModule&nbsp;{}