时间戳

首页 > 解决方案 > 角度中的多个可能的变量赋值

angular - 角度中的多个可能的变量赋值

问题描述

我需要澄清 Angular 服务中的变量分配，

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

情况1

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

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

      sampleArray;    

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

      ngOnInit() { }
    }

案例2

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

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

      sampleArray;    

      constructor() {}

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

案例3

    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

标签： angularvariable-assignmentangular-services

解决方案

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

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

我将添加差异并包括ngOnInit它是否在组件/指令中实现。

对于构造函数赋值和内联直接赋值之间的区别，从这里：

两者都是正确的编程方式，

在构造函数中初始化

在构造函数中进行初始化是一种好习惯，它是声明+初始化的一种代码分离。

这将增加您的代码可读性，并且您将确保仅在构造函数中初始化所有值。并且因为在构造函数中是创建对象的时间，也是应该初始化变量的时间。

在构造函数之外初始化

使用构造函数初始化的一个问题是，要编写更多代码，当你有很多变量要使用时，在这种情况下你应该使用直接counter: number = 1，在这种情况下你可以在单行中检查声明+初始化，但在上面的情况下你有经历2个步骤声明+初始化

当您在生命周期钩子（例如NgOnInit/ NgAfterViewInit）与 constructor. 要么它只是一种编码风格

对于构造函数和 ngOnInit 钩子，从这里开始：

这Constructor是类的默认方法，在类被实例化时执行，并确保类及其子类中字段的正确初始化。Angular或更好的依赖注入器（DI）分析构造函数参数，当它通过调用它创建一个新实例时，它会new MyClass()尝试找到与构造函数参数类型匹配的提供者，解析它们并将它们传递给构造函数，例如

new MyClass(someArg);

ngOnInit是 Angular2 调用的生命周期钩子，用于指示 Angular 已完成创建组件。

我们必须导入OnInit才能像这样使用（实际上实施OnInit不是强制性的，但被认为是好的做法）：

import {Component, OnInit} from '@angular/core';

然后要使用OnInit我们必须在这样的类中实现的方法。

export class App implements OnInit{
  constructor(){
     //called first time before the ngOnInit()
  }

  ngOnInit(){
     //called after the constructor and called  after the first ngOnChanges() 
  }
}

在您的指令的数据绑定属性初始化后，实现此接口以执行自定义初始化逻辑。ngOnInit 在第一次检查指令的数据绑定属性之后，并且在检查其任何子项之前立即调用。当指令被实例化时，它只被调用一次。

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

所以你应该使用constructor()设置依赖注入而不是其他。ngOnInit() 是“开始”的更好地方——它是解决组件绑定的地方/时间。

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

推荐阅读