Angular 指令初始化良好实践

【问题标题】：Angular Directive initialization good practicesAngular 指令初始化良好实践
【发布时间】：2018-11-20 10:11:02
【问题描述】：

我想知道我应该在哪里初始化组件或指令复杂属性，例如可观察对象、与表单相关的东西，甚至是一些需要一些时间和资源来执行的同步代码

假设我有两个版本的相同组件：

@Component({})
class ExampleComponent {
  // initialization in class body or constructor
  users$ = this.store.select(selectUsers);
  constructor(
    protected store: Store<any>,
  ) { }
}

@Component({})
class ExampleComponent implements OnInit {
  users$: Observable<User[]>;
  constructor(
    protected store: Store<any>,
  ) { }
  // initialization on component init
  ngOnInit() {
    this.users$ = this.store.select(selectUsers);
  }
}

哪个版本更高效？各有什么优缺点？

【问题讨论】：

标签： angular typescript angular-components

【解决方案1】：

在初始化阶段，最好在 ngOnInit 生命周期事件处理程序中发出请求 - 也许您需要一些 @Input 参数，这些参数将被传递给组件并在请求中使用 - 所以这些参数将只能在ngOnInit 获得，请求必须到那里。

如果你只有一个没有任何@Input参数的组件，并且与其他组件无关，你可以使用第一个版本，但在这种情况下（如果你没有任何参数）它也是一个在ngOnInit 中提出请求的常用样式。所以我建议有一个共同的风格并使用第二个版本。效率怎么样 - 它们是相同的 - 您的变量是同时创建的，并且只调用 this.store.select(selectUsers) 为其分配一个值。

【讨论】：