angular - 为什么在构造函数中初始化的成员变量在 ionic/angular 的 ngInit 中未定义？

Question

我有一个模态框，它包含一个绑定(bind)到“Foo”实例的表单。在构建模态期间，foo 设置正确。我使用断点和 console.log 仔细检查了两者。但是，在构造函数之后的任何时候，this.foo 都是 undefined。

--

编辑:我找到了解决方案，但我的问题仍然存在。我的解决方案是将我对 foo 的赋值移动到 ngOnInit() 而不是构造函数。

--

模板:

<ion-header>
    <ion-toolbar>
      <ion-title>New Foo</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-item>
        <ion-input placeholder="Name" [(ngModel)]="foo.name"></ion-input>
      </ion-item>
      <!-- etc... -->
    </ion-list>

    <ion-button expand="block" color="primary" (click)="create()">
      Create
    </ion-button>
</ion-content>

组件:

export class FooModalComponent implements OnInit {

  foo: Foo = new Foo();

  constructor(
    private modalController: ModalController,
    private navParams: NavParams
  ) { 
    const inputFoo = this.navParams.get("foo");

    if (inputFoo) {
      // this shouldn't matter, as foo would have to be truthy (not undefined)
      this.foo = inputFoo;
    }

    // logs this.foo as expected
    console.log(this.foo);
  }

  ngOnInit() {
    // logs: undefined
    console.log(this.foo);
  }

  close() {
    this.modalController.dismiss();
  }

  create() {
    this.modalController.dismiss(this.foo);
  }
}

型号:

export class Foo {
    name: string;
}

Answer 1

在较新的 Ionic 版本(可能是 4+)中，作为 componentProps/NavParams 传递给模态的数据会自动分配给要显示的组件中的相应类变量。如果你传递一个 undefined variable ，相应的字段将有效地被删除。这发生在对象构建之后，但在调用 ngOnInit 之前，这就是您的解决方法成功的原因。

Ionic 5 documentation为此提到了 @Input 注释，但同样的情况似乎也没有发生，尽管我找不到对该声明的任何确认。

你可能做了什么:

this.modalController.create({
  component: FooModalComponent,
  componentProps: { foo: foo } // foo might be undefined
})

为了避免传递一个未定义的 foo，你可以这样做:

this.modalController.create({
  component: FooModalComponent,
  componentProps: foo ? { foo } : {}
})

或者，如您所做，根据需要在 ngOnInit 中重新分配变量。附带说明一下，您可能不再需要构造函数中的 NavParams，因为此时已分配传递的参数。