javascript - 一个函数中的 Angular 组件类变量集在另一个函数中未定义

Question

我有一个组件，其中 viewChild() 绑定(bind)到子组件，我用它来调用子组件中的函数。该函数接受 true 或 false 参数，旨在将子组件中的类变量设置为参数的值。然后，该类变量将在子组件中另一个函数的 if 语句中读取。

到目前为止，我已经成功从父组件调用子组件函数，向其传递 bool 参数，设置类变量，并将其打印到控制台。我已经验证该类函数包含在组件的“this”中。

在父组件中:

  if (res[0] === undefined) {
    this.typeAhead.badRequest(true);
  }

在子组件中: onSubmit()函数中的控制台日志仅返回声明变量时设置的_badRequestFlag的值，而不是badRequest()中分配的值。

private _badRequestFlag: boolean = false;

badRequest (res: boolean) {
  this._badPlaRequestFlag = res;
}

onSubmit (): void {
  console.log('BAD PLA REQUEST:, ', this);
    if (this._badRequestFlag === true) {
      alert('Does Not Exist');
      throw (new Error('Does Not Exist'));
}

当我尝试在 onSubmit() 函数中使用类变量时，它的值只是声明它的值，而不是 badRequest() 函数中设置的值。我假设我遇到了范围界定问题，但我无法确定解决问题的内容以及如何解决。

Answer 1

我建议使用输入来设置 badRequestFlag:

class ChildComponent {
  @Input() badRequestFlag: boolean;
}


@Component({
selector: 'app',
  template: `
    <child-component [badRequestFlag]="true"></child-component>
  `
})

您可以将其绑定(bind)到父 Controller 中的变量:[badRequestFlag]="requestFlag"