如何处理 Angular 中所需的组件输入

Question

我正在开发一个使用 Angular (v16) 作为框架的 Web 应用程序。

我对 Angular 初始化组件数据的方式有一些问题。我经常定义需要某些数据作为输入的组件，没有它就没有必要显示任何内容。在许多情况下，这些数据是异步获取的。我认为这个用例非常常见，并且基本上一直在使用。

然而，用 Angular 来实现这一点是相当尴尬的。假设我有一个

PersonComponent

组件，它应该显示有关人员的一些详细信息（由

Person

对象表示）。

export interface Person {
  name: string;
  birthYear: number;
}


@Component({
  selector: 'app-person',
  template: '<p>{{person?.name}} age: calcAge()<p>',
})
export class PersonComponent {
  @Input()
  person: Person | undefined;

  public function calcAge(): number | undefined {
    if (this.person === undefined) {
      return undefined;
    }

    return ...
  }

不可能为组件设置一个合约，让组件在初始化后可以依赖输入的有效状态。我被迫将

person

的类型声明为

Person | undefined

而不是仅仅

Person

，因为在构造组件时，尚未设置值。如果我选择相同类型的其他默认值，这可能会导致问题，并且更难以检测输入变量是否已正确初始化。但由于

person

可能未定义，它会产生一系列其他问题。基本上，我必须每次都检查我的输入是否已正确初始化。在模板中，我需要使用可选链接、无效合并或将整个模板包装在

ngIf

块内，该块断言输入已定义。在组件逻辑中，我需要在每个函数之前进行额外的检查，然后这些函数也可能返回未定义。当我在另一个模板中使用该组件时，如果我想确保在没有正确初始化数据的情况下不会实例化任何内容，我还需要将其包装在

ngIf

块中。

当存在多个必需输入或使用异步数据时（其中

async

语法已经感觉非常不稳定），问题只会加剧。 Angular 有没有更好的方法来处理这种情况？我觉得需要采取很多解决方法才能确保组件处于有效状态并拥有所需的所有数据。据我所知，在其他情况下，组件会自行加载不同类型的数据，或者即使在基本上未初始化的状态下也需要显示某些内容。但更常见的情况是，我要么有一些数据可用，要么没有，我想用组件显示相应的数据（如果可用），否则根本不显示任何内容。在这种情况下，防止无效的对象状态是非常麻烦的。

Answer 1

Angular v16 的最新新增功能是能够根据需要标记组件输入。这是链接帖子中的示例：

@Component({
  selector: 'app-foo',
  standalone: true,
  templateUrl: './foo.component.html',
})
export class FooComponent {
  @Input({ required: true }) elementId: string;
}

或者，您可以在未提供任何内容的情况下提供占位符值：

@Component({
  selector: 'app-foo',
  standalone: true,
  templateUrl: './foo.component.html',
})
export class FooComponent {
  @Input() elementId: string = 'myElementString';
}

但更广泛地说，如果您认为有时可能没有提供任何内容，那么使用可选访问语法可能是明智的。您可以使用

*ngIf

检查并提供默认行为。它肯定会使组件文件更加冗长，但它会引导您编写更好、更具防御性的代码，从而减少出错的机会。