这是您需要了解的有关Angular中的动态组件的知识

文章插图
像专业人士一样动态创建组件
如果您一直在使用进行编程，则可能已经习惯于即时生成HTML字符串，通过$ 服务运行它们，并链接到数据模型（作用域）以获得双向数据绑定。
const= ' on the fly: {{name}}' const= $(); const= $scope.$new(); .name = '' // link data model to a();
在中，指令可以以任何可能的方式修改DOM ，而框架不知道修改的内容。但是，这种方法的问题与任何动态环境都一样-很难针对速度进行优化。动态模板评估当然不是被视为缓慢框架的主要原因，但它无疑有助于声誉。
在研究了内部很长时间之后，似乎新的框架设计很大程度上是由对速度的需求所驱动。您会在源代码中找到许多类似这样的评论：
:to this is! Note: We use one type for all nodes so that loops that loop over all nodes of astay ! For, we want to check andthe list every five .
因此，较新的框架中的成员决定提供较少的灵活性以换取更大的速度。并介绍了JIT和AOT编译器以及静态模板。和工厂。和工厂解析器。以及许多其他对社区不熟悉的事物。但是不用担心。如果您以前曾经遇到过这些概念，并且想知道继续阅读这些概念并获得启发。
组件工厂和编译器
在中，每个组件都是从工厂创建的。并且工厂由编译器使用您在@装饰器中提供的数据生成。如果在阅读了许多网络文章之后，您仍然不确定该装饰器的作用是阅读《实现自定义组件装饰器》。
引擎盖下的使用视图的概念。运行中的框架本质上是一棵视图树。每个视图由不同类型的节点组成：元素节点，文本节点等。每个节点在其用途上都有专门的用途，因此处理此类节点所需的时间尽可能短。每个节点都有各种提供程序，例如和。每个节点都知道如何响应诸如和之类的查询。
每个节点都有很多信息。现在，为了优化速度，在构建节点时必须提供所有这些信息，并且以后无法更改。这就是编译过程的工作-收集所有必需的信息，并将其封装为组件工厂的形式。
假设您定义一个组件及其模板，如下所示：
@({ : 'a-comp', : 'A ' }) class{}
编译器使用这些数据生成以下组件工厂：
(l) {(0,[ (l()(),(0,null,null,1, 'span' ,...)), (l()(),(null,[ 'My name is ' ,...])) ]
它描述了组件视图的结构，并在实例化组件时使用。第一个节点是元素定义，第二个节点是文本定义。您可以看到，通过参数列表实例化每个节点时，都会获得所需的信息。解析所有必需的依赖项并在运行时提供它们是编译器的工作。
如果您有权访问工厂，则可以轻松地从中创建组件实例，并使用将其插入DOM 。我已经在探索 DOM操作中写过它。它是这样的：
class{ @("vc", {read: }) vc: ; () { this.vc.(); } }
因此，现在的问题是如何访问组件工厂，我们很快就会看到。

文章插图
模块和lver
尽管也有模块，但缺少指令的真实名称空间。总是存在冲突的可能性，并且没有办法将实用程序指令封装在特定模块中。幸运的是，吸取了教训，现在为声明式类型（指令，组件和管道）提供了适当的命名空间。