时间戳

首页 > 解决方案 > 在 Angular 组件中声明变量。在 ngOnInit 或变量声明中？

angular - 在 Angular 组件中声明变量。在 ngOnInit 或变量声明中？

问题描述

在 Angular 7 应用程序中，我有以下组件：

export class ListComponent implements OnInit {

  visible: boolean;

  ngOnInit() {
    this.visible = false;
  }

  toggle() {
    this.visible = !this.visible
  }

}

在我看来：

<table *ngIf="visible">
  Table content
</table>

在 ngOnInit 或变量声明中设置 visible 的初始值有什么区别，例如：

visible: boolean = false;

哪种方法更好？

标签： angular

解决方案

当您已经知道要在变量中分配的数据时，最好在声明时对其进行初始化

@Component({...})
export class ChildComponent {

   visible: boolean = false;

}

但是，如果您的变量依赖于另一个服务或函数，那么您需要在 ngOnInit 内而不是在构造函数上指定它

“大多数情况下，我们使用 ngOnInit 进行所有初始化/声明，并避免在构造函数中工作。构造函数应该只用于初始化类成员，而不应该做实际的“工作”。

“ngOnInit() 是“开始”的更好地方——它是解决组件绑定的地方/时间。”

- Pardeep Jain

@Component({...})
export class ChildComponent {

   visible: boolean;

   constructor(private sampleService: SampleService) {}

   ngOnInit() {
      this.visible = this.sampleService.isVisible;     // May it a plain boolean or an Observable that you need to subscribe
   }

}

推荐阅读