我正在阅读 Max NgWizard K 的 article，关于 Angular 如何更新 DOM。我遇到了以下情况：
对于应用程序中使用的每个组件，Angular 编译器都会生成一个工厂。当 Angular 从工厂创建组件时，Angular 使用这个工厂来实例化视图定义，而视图定义又用于创建组件视图。在引擎盖下，Angular 将应用程序表示为视图树。
在 Max NgWizard K 的 another article 中，我找到了工厂的定义：
工厂描述组件视图的结构，并在实例化组件时使用。
我不太确定这是什么意思。
【问题讨论】：
标签： javascript angular typescript angular-factory
Angular(2+) 中的工厂到底是什么？
工厂是四人帮提到的设计模式之一（基本上他们写了一本关于他们发现的设计模式的书）。
设计模式帮助程序员以特定的方式解决常见的开发任务。
在这种情况下，Factory 模式有助于实例化和创建对象。
它也被称为虚拟构造器。
想一想，像这样：
假设您正在制作一款 2D 射击游戏，并且您必须从枪管中射出子弹。
不用像new Bullet()那样实例化子弹，每次扣动扳机时，您都可以使用工厂来创建子弹，即WeaponsFactory.createInstance(BulletTypes.AK47_BULLET)。
它变得高度可扩展，因为您所要做的就是更改枚举，工厂会为您制作。
您不必手动实例化它。
这就是 Angular 所做的，它会自动创建所有组件的工厂。这使它的工作更容易。
是否有开发人员通过了解其工作原理而受益的场景？
您不必了解 Factory 的内部工作原理即可使用 Angular，但它对于动态创建组件很有用！
例如很多*ngIf，或者*ngSwitchCase都可以用简单的动态生成组件来代替
组件可以像这样动态创建：
createComponent(type) {
this.container.clear();
const factory: ComponentFactory = this.resolver.resolveComponentFactory(AlertComponent);
this.componentRef: ComponentRef = this.container.createComponent(factory);
}
理解以上代码参考：Dynamically Creating Components
【讨论】：
在这种情况下，“工厂”是ComponentFactory 的一个实例，该类具有实现Factory method pattern 的create 方法。
当componentFactory.create 被调用（直接或通过ComponentFactoryResolver - 正如linked article 所解释的那样，这对于动态组件至关重要）时，会创建新的组件实例。
【讨论】：
一般来说，工厂是一种创造设计模式。它是一个用于创建其他对象的对象——从形式上讲，工厂是一个函数或方法，它从某个方法调用返回不同原型或类的对象。
@Component({
selector: 'app-typical',
template: '<div>A typical component for {{data.name}}</div>'
)}
export class TypicalComponent {
@Input() data: TypicalData;
constructor(private someService: SomeService) { ... }
}
Angular 编译器会提取一次元数据并生成一个 典型组件的工厂。当它需要创建一个 典型的组件实例，Angular 调用工厂，它产生一个 新的视觉元素，绑定到组件类的新实例 及其注入的依赖项。
这是在幕后发生的事情。但是您也可以使用 ComponentFactoryResolver 创建动态组件 (Dynamic component loader)
//Only dynamic component creation logic is shown below
loadComponent() {
this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
const adItem = this.ads[this.currentAdIndex];
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
const viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent<AdComponent>(componentFactory);
componentRef.instance.data = adItem.data;
}
还可以阅读这篇关于how the component factories work in Ivy的文章。
【讨论】：