angular 中的多个可能的变量赋值

Question

我需要澄清 Angular 服务中的变量赋值，

我是 Angular 的新手，我希望深入了解在这三个位置分配变量的含义，如下图所示。

案例一

    import { Injectable, OnInit } from "@angular/core";

    @Injectable({
      providedIn: 'root'
    })
    export class FavoriteMovieService implements OnInit {

      sampleArray;    

      constructor() {
        this.sampleArray = [1, 2, 3, 4, 5];
      }

      ngOnInit() { }
    }

案例二

    import { Injectable, OnInit } from "@angular/core";

    @Injectable({
      providedIn: 'root'
    })
    export class FavoriteMovieService implements OnInit {

      sampleArray;    

      constructor() {}

      ngOnInit() {
        this.sampleArray = [1, 2, 3, 4, 5];
      }
    }

案例三

    import { Injectable, OnInit } from "@angular/core";

    @Injectable({
      providedIn: 'root'
    })
    export class FavoriteMovieService implements OnInit {

      sampleArray = [1, 2, 3, 4, 5];;    

      constructor() {}

      ngOnInit() {}
    }

版本信息

  Angular CLI: 8.3.5
Node: 10.15.3
OS: win32 x64
Angular: 8.2.7

Answer 1

在添加差异之前，请注意 ngOnInit 在您的情况下根本不起作用。它不会被调用。

唯一可以与服务一起使用的生命周期挂钩是 ngOnDestroy，它将在服务被销毁时调用。所有其他生命周期挂钩，如 ngOnInit 都不会被调用，因为它们只会被组件和指令调用。

如果 ngOnInit 是在组件/指令中实现的，我将添加差异并包括在内。

关于构造函数赋值和内联直接赋值的区别，来自:

Both are correct programming wise,

Initialized within the constructor

It would be good practice to initialized within the constructor , it's kind of code separation of declaration + initialization .

That will increase your code readability and you will be sure that all values initialized within the constructor only. and because in the constructor is when the object is created, and it is when the variable should initialized.

在构造函数外初始化

One issue with initialized using the constructor is , more code to write , when you have alot variable to work with , in that case you should use direct counter: number = 1 , In this case you can check declaration + initialization in single line , but in above case you have to go through 2 steps declaration + initialization

在生命周期钩子之一（例如 NgOnInit / NgAfterViewInit）中选择初始化与 constructor。要么只是一种编码风格

对于构造函数和 ngOnInit 钩子，来自 :

The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialization of fields in the class and its subclasses. Angular or better Dependency Injector (DI) analyzes the constructor parameters and when it creates a new instance by calling new MyClass() it tries to find providers that match the types of the constructor parameters, resolves them and passes them to the constructor like
new MyClass(someArg);
ngOnInit is a life cycle hook called by Angular2 to indicate that Angular is done creating the component.

We have to import OnInit in order to use like this (actually implementing OnInit is not mandatory but considered good practice):
import {Component, OnInit} from '@angular/core';
then to use the method of OnInit we have to implement in the class like this.
export class App implements OnInit{
  constructor(){
     //called first time before the ngOnInit()
  }

  ngOnInit(){
     //called after the constructor and called  after the first ngOnChanges() 
  }
}
Implement this interface to execute custom initialization logic after your directive's data-bound properties have been initialized. ngOnInit is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated.

大多数情况下，我们对所有 initialization/declaration 使用 ngOnInit 和避免在构造函数中工作。构造函数应该只是用于初始化 class 成员但不应该做实际的 "work".

所以你应该使用 constructor() 来设置依赖注入和没有别的了。 ngOnInit() 是 "start" 更好的地方 - 它是 where/when 组件的绑定已解决。

有关更多信息，请参阅此处：

https://angular.io/api/core/OnInit

angular 中的多个可能的变量赋值

Multiple possible variable assignment in angular

variable-assignment

angular-services

angular