Angular 指令初始化良好实践

Question

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

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

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

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

Answer 1

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

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

时为其分配一个值

Angular 指令初始化良好实践

Angular Directive initialization good practices

typescript

angular-components

angular