什么是有角的工厂？

Question

我读了一本文章 of Max NgWizard K，关于如何角度更新DOM。我遇到了以下情况：

对于应用程序中使用的每个组件，角编译器都会生成一个工厂。当角从工厂创建一个组件时，角使用这个工厂实例化视图定义，这个定义反过来用于创建组件视图。在遮罩角下，将应用程序表示为视图树。

在Max NgWizard K的另一篇文章中，我找到了工厂的定义：

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

我不太清楚这意味着什么。

问题：

1. 角工厂(2+)到底是什么？
2. 是否有开发人员从了解他们的工作方式中获益的场景？

Answer 1

角工厂(2+)到底是什么？

Factory是“四人帮”提到的设计模式之一(基本上他们写了一本关于他们发现的设计模式的书)。

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

在本例中，Factory模式有助于实例化和创建对象。

它也被称为虚拟构造器。

想想吧，就像这样：

假设你正在制作一款2D射击游戏，你必须从枪管中射出子弹。

与其实例化像new Bullet()这样的子弹，每次扣动触发器，您还可以使用工厂创建子弹，即WeaponsFactory.createInstance(BulletTypes.AK47_BULLET)。

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

您不必手动实例化它。

这就是角的作用，它会自动创建所有部件的工厂。这样它的工作就更容易了。

是否有开发人员从了解他们的工作方式中获益的场景？

您不需要知道工厂的内部工作原理才能使用角，但是它对于动态创建组件很有用！

许多*ngIf或*ngSwitchCase可以被简单的组件动态生成所替代

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

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

了解上述代码的参考资料：动态创建组件

Answer 2

在本例中，“工厂”是ComponentFactory的一个实例，该类具有实现工厂方法模式的create方法。

当componentFactory.create被调用时(无论是直接调用还是通过ComponentFactoryResolver调用--正如链接物品所解释的那样，这对于动态组件是必不可少的)，就会创建新的组件实例。

Answer 3

一般来说，工厂是一种创造性的设计模式。它是一个用于创建其他对象的对象--正式地说，一个工厂是一个函数或方法，它从某个方法调用中返回一个变化的原型或类的对象。

来自角文档

@Component({
  selector: 'app-typical',
  template: '<div>A typical component for {{data.name}}</div>'
)}
export class TypicalComponent {
  @Input() data: TypicalData;
  constructor(private someService: SomeService) { ... }
}

角编译器只提取一次元数据，并为TypicalComponent生成一个工厂。当它需要创建一个TypicalComponent实例时，角调用工厂，该工厂生成一个新的可视元素，绑定到带有注入依赖关系的组件类的一个新实例。

这是在幕后发生的事情。但是您也可以使用ComponentFactoryResolver创建动态组件(动态组件加载器)

//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;
}

还可以阅读这篇关于组件工厂是如何在常春藤中工作的的文章。