构造函数中的变量初始化速度不够快，无法防止 html 代码中的空指针异常 [Angular]

Posted 2023-03-13

【中文标题】构造函数中的变量初始化速度不够快，无法防止 html 代码中的空指针异常 [Angular]

【英文标题】：variable initialization in constructor not fast enough to prevent nullpointer exception in htmlcode [Angular]

【发布时间】：2019-01-29 20:41:12

【问题描述】：

我正在尝试基于any 类型的注入变量初始化一个变量。 但这并没有及时发生，因为在前端代码：

<h2>(formGroup) ? formGroup.get('title').value : bookLinkArticle.title</h2>

导致空指针异常。

这是后端的代码：

import  Component, OnInit, Input  from '@angular/core';
import  GenericArticleDTO  from '../dto/generic-article-dto';
import  FormGroup  from '@angular/forms';

@Component(
  selector: 'app-book-article',
  templateUrl: './book-article.component.html',
  styleUrls: ['./book-article.component.css']
)
export class BookArticleComponent implements OnInit 
  @Input() data: any;
  bookLinkArticle: GenericArticleDTO;
  formGroup: FormGroup;

  //als het als voorbeeld gebruikt wordt moet de formGroup geinjecteerd worden, anders een bookLinkArticle.
  constructor() 
    if(this.data instanceof FormGroup)
      this.formGroup = this.data as FormGroup;
      console.log("is formgrpu undefined:" + this.formGroup === undefined);
    
    else if(this.data instanceof GenericArticleDTO)
      this.bookLinkArticle = this.data as GenericArticleDTO;
   

  ngOnInit() 
  

我一直认为在创建对象或组件期间，首先调用构造函数。根据Essential difference between constructor and ngoninit 的文章，情况确实如此。 （您可以在标题与组件初始化过程相关的差异下阅读有关它的内容。

但似乎 HTML 模板是在调用构造函数之前构造的，否则我不会得到空指针异常。解决方案是将代码从构造函数移动到 ngOnInit。但这对我来说没有意义，ngOnInit 是一个特殊的方法，但在构造函数完成构造/初始化之前，方法和方法仍然不会被调用。因为将代码移动到 ngOnInit 解决了这个问题，所以看起来好像 ngOninit 在构造函数之前被调用了！

有人可以向我解释一下这里发生了什么吗？谢谢

【问题讨论】：

可能this.data还没有在构造函数中设置，所以构造函数什么也没做？

我认为构造函数比@input 更早触发，但在你的位置上，我最好将插值放入一个返回你需要的值的函数中，并且除了模板之外没有在任何地方运行这个函数。跨度>

@MattMcCutchen 该组件仅在具有data 时才加载。 （我为此使用 *ngIf）

即便如此，我看不到 Angular 在调用构造函数之前可以设置 this.data 的任何方式。我假设Angular所做的是调用构造函数，然后设置this.data，然后调用ngOnInit。

【参考方案1】：

我认为您正在尝试从父母那里收集作为输入的数据。所以它不会是构造函数的一部分。应该是Init

这个链接清楚地解释了你 https://toddmotto.com/angular-constructor-ngoninit-lifecycle-hook