Angular 中的工厂是什么

Wil*_*een 6 javascript typescript angular-factory angular

我正在阅读Max NgWizard K的一篇关于 Angular 如何更新 DOM 的文章。我遇到了以下情况:

对于应用程序中使用的每个组件,Angular 编译器都会生成一个工厂。当 Angular 从工厂创建组件时,Angular 使用该工厂来实例化视图定义,而视图定义又用于创建组件视图。在引擎盖下,Angular 将应用程序表示为视图树。

在Max NgWizard KI 的另一篇文章中找到了工厂的定义:

工厂描述组件视图的结构,并在实例化组件时使用。

我不太确定这是什么意思。

问题:

  1. Angular(2+) 中的工厂究竟是什么?
  2. 是否存在开发人员因了解其工作原理而受益的场景?

Abh*_*r ツ 7

Angular(2+) 中的工厂究竟是什么?

Factory是Gang of Four提到的设计模式之一(基本上他们写了一本关于他们发现的设计模式的书)。

设计模式帮助程序员以特定的方式解决常见的开发任务。

在这种情况下,工厂模式有助于实例化和创建对象。

它也被称为虚拟构造函数。


想一想,像这样:

假设您正在制作 2D 射击游戏,并且您必须从枪管中射出子弹。

不是像 那样实例化子弹new Bullet(),每次拉动扳机时,您可以使用工厂来创建子弹,即WeaponsFactory.createInstance(BulletTypes.AK47_BULLET)

它变得高度可扩展,因为您所要做的就是更改枚举,工厂将为您制作。

您不必手动实例化它。


这就是 angular 所做的,它会自动创建所有组件的工厂。这使得它的工作更容易。

是否存在开发人员因了解其工作原理而受益的场景?

您不必了解工厂的内部工作原理即可使用 Angular,但它对于动态创建组件很有用!

例如,很多 *ngIf 或 *ngSwitchCase 可以被简单的动态生成组件替换

组件可以像这样动态创建:

createComponent(type) {
  this.container.clear();
  const factory: ComponentFactory = this.resolver.resolveComponentFactory(AlertComponent);
  this.componentRef: ComponentRef = this.container.createComponent(factory);
}
Run Code Online (Sandbox Code Playgroud)

理解以上代码参考:Dynamicly Creating Components