时间戳

首页 > 解决方案 > Angular 指令初始化良好实践

angular - Angular 指令初始化良好实践

问题描述

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

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

@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);
  }
}

哪个版本更高效？各自的优点和缺点是什么？

标签： angulartypescriptangular-components

解决方案

在初始化阶段，最好在ngOnInit生命周期事件处理程序中发出请求-也许您需要一些@Input将传递给组件并在请求中使用的参数-因此这些参数仅在ngOnInit请求时可用那里。

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

推荐阅读