Question

使用Angular 9，我有一个子组件，其中ngOnInit函数被调用了两次。第一次，某些@Inputs未定义，第二次，所有@Inputs被正确初始化。该组件将第二次呈现。

这是设置：父组件嵌套一个子组件。我们使用布尔标志foobarDataReady来控制foobar组件何时初始化。随后，我添加了对viewName的检查-这是在第一次ngOnInit调用中未定义的@Input。

<div *ngIf="foobarDataReady && viewName>
   <foobar #foobarForm [ctxObject]="ctxObject" [typeName]="'Dog'" [viewName]="'DogView'" </foobar>
</div>

以下是foobar组件：

export class FooBarComponentimplements OnInit {

  @Input() public viewName: string;
  @Input() public typeName: string;
  @Input() public ctxObject: any;

  constructor() {}
  ngOnInit() {
     console.log("ngOnInit ctxObject", this.ctxObject);
     console.log("ngOnInit typeName", this.typeName);
     console.log("ngOnInit viewName", this.viewName);
  }

该组件以这种方式触发：

When foobarDataReady is true:
   ngOnInit 1
      - ctxObject is populated
      - typeName is populated
      - viewName is undefined
      - Component does not render but no errors
   ngOnInit 2
      - ctxObject is populated
      - typeName is populated
      - viewName is populated 
      - Component renders

有什么想法吗？ typeName和viewName是常量，并且以完全相同的方式定义和设置。即使在组件的ngIf条件中包含viewName，如果是ngOnInit，则在第一次调用时仍未定义。

关于如何调试此功能的任何想法？我一直在寻找格式错误的代码，并使用Chrome DevTools通过javascript进行了调试跟踪，而没有注意到任何奇怪的情况

子组件的Angular 9 ngOninit调用了两次

0 个答案: