Question

我正在阅读Max {3}}的Max NgWizard K，关于Angular如何更新DOM。我发现了以下内容：

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

在Max NgWizard K的article中，我找到了工厂的定义：

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

我不确定这是什么意思。

问题：

Angular（2+）的工厂究竟是什么？
是否有开发人员知道如何运作的情景？

Answer 1

Angular（2 +）的工厂究竟是什么？

工厂是Gang of Four提到的设计模式之一（基本上他们写了一本关于他们发现的设计模式的书）。

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

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

它也称为虚拟构造函数。

想一想，就像这样：

假设你正在制作2D射击游戏，你必须用枪弹射出子弹。

除了实例化new Bullet()之类的项目符号外，每次触发扳机时，您都可以使用工厂创建项目符号，即WeaponsFactory.createInstance(BulletTypes.AK47_BULLET)。

它变得高度可扩展，因为您只需更改枚举，工厂就可以为您制作。

您不必手动实例化它。

这就是角度所做的，它会自动创建所有组件的工厂。这使其工作更轻松。

是否有开发人员知道如何运作的情景？

您不必知道工厂的内部工作原理就可以使用Angular，但它对于动态创建组件非常有用！

e.g。很多* ngIf或* ngSwitchCase可以被简单的动态生成组件取代

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

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

参考以了解上述代码：Dynamically Creating Components

Answer 2

＆＃39;工厂＆＃39;在这种情况下，是ComponentFactory的一个实例，这个类具有create方法，可以实现Factory method pattern。

调用componentFactory.create时（直接或通过ComponentFactoryResolver - 这对于动态组件至关重要，正如linked article所解释的那样），会创建新的组件实例。

Answer 3

通常，工厂是一种创新的设计模式。它是用于创建其他对象的对象–形式上，工厂是从某个方法调用返回不同原型或类的对象的函数或方法。

从Angular docs

@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的这篇文章。

什么是Angular的工厂

问题：

3 个答案: