angularjs内部到底有没有组件？Angular内部组件的详细介绍

本篇文章主要的向大家介绍了关于angularjs内部的组件的问题，想知道答案的都看过来啊，文中详细的介绍了angularjs内部有没有组件，现在我们就一起来看这篇文章吧

angularjs问题解释：

从我开始使用 Angular 开始，就被组件和指令间区别的问题所困惑，尤其对那些从 Angular.js 世界来的人，因为 Angular.js 里只有指令，尽管我们也经常把它当做组件来使用。如果你在网上搜这个问题解释，很多都会这么解释：

这些说法貌似都对，我在查看由 Angular 编译器编译组件生成的视图工厂源码里，的确没发现组件定义，你如果查看也只会发现 指令。

注：使用 Angular-CLI ng new 一个新项目，执行 ng serve 运行程序后，就可在 Chrome Dev Tools 的 Source Tab 的 ng:// 域下查看到编译组件后生成的 **.ngfactory.js 文件，该文件代码即上面说的视图工厂源码。

但是我在网上没有找到 原因解释，因为想要知道原因就必须对 Angular 内部工作原理比较熟悉，如果上面的问题也困让了你很长一段时间，那本文正适合你。让我们一起探索其中的奥秘并做好准备吧。

本质上，本文主要解释 Angular 内部是如何定义组件和指令的，并引入新的视图节点定义——指令定义。

注：视图节点还包括元素节点和文本节点，有兴趣可查看 译 Angular DOM 更新机制 。

视图

如果你读过我之前写的文章，尤其是 译 Angular DOM 更新机制，你可能会明白 Angular 程序内部是一棵视图树，每一个视图都是由视图工厂生成的，并且每个视图包含具有特定功能的不同视图节点。在刚刚提到的文章中（那篇文章对了解本文很重要嗷），我介绍过两个最简单的节点类型——元素节点定义和文本节点定义。元素节点定义是用来创建所有 DOM 元素节点，而文本节点定义是用来创建所有 DOM 文本节点 。

所以如果你写了如下的一个模板：

<p><h1>Hello {{name}}</h1></p>

Angular Compiler 将会编译这个模板，并生成两个元素节点，即 p 和 h1 DOM 元素，和一个文本节点，即 Hello {{name}} DOM 文本。这些都是很重要的节点，因为没有它们，你在屏幕上看不到任何东西。但是组件合成模式告诉我们可以嵌套组件，所以必然另一种视图节点来嵌入组件。为了搞清楚这些特殊节点是什么，首先需要了解组件是由什么组成的。本质上，组件本质上是具有特定行为的 DOM 元素，而这些行为是在组件类里实现的。首先看下 DOM 元素吧。

自定义 DOM 元素

你可能知道在 html 里可以创建一个新的 HTML 标签，比如，如果不使用框架，你可以直接在 html 里插入一个新的标签：

<a-comp></a-comp>

然后查询这个 DOM 节点并检查类型，你会发现它是个完全合法的 DOM 元素（注：你可以在一个 html 文件里试试这部分代码，甚至可以写上 <a-comp>A Component</a-comp> 是一个组件，所以对于下面的简单模板：

const element = document.querySelector('a-comp');
element.nodeType === Node.ELEMENT_NODE; // true

编译器会编译它，生成一个带有视图定义和视图节点的工厂函数：

class AComponent extends HTMLElement {...}
window.customElements.define('a-comp', AComponent);

Angular 是一个视图树，所以父视图需要有个对子视图的引用，子视图会被存储在元素节点内。本例中，a-comp 的视图存储在为 <a-comp></a-comp> 生成的宿主元素节点内（注：意思就是 AComponent 视图存储在该组件宿主元素的元素定义内，就是存在 componentView 属性里。也可以查看 _Host.ngfactory.js 文件，该文件表示宿主元素 <a-comp></a-comp> 的工厂，里面存储 AComponent 视图对象）。jit_View_AComponent_04 参数是一个 代理类 的引用，这个代理类将会解析 工厂函数 创建一个 视图定义。每一个视图定义仅仅创建一次，然后存储在 DEFINITION_CACHE，然后这个视图定义函数被 Angular 用来 创建视图对象。

SCA介绍及应用实例 中文WORD版

本文档主要讲述的是SCA介绍及应用实例；SCA（Service Component Architecture）是针对SOA提出的一套服务体系构建框架协议，内部既融合了IOC的思想，同时又把面向对象的复用由代码复用上升到了业务模块组件复用，同时将服务接口，实现，部署，调用完全分离，通过配置的形式灵活的组装，绑定。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

0

查看详情

注：这段由于涉及大量的源码函数，会比较晦涩。作者讲的是创建视图的具体过程，细致到很多函数的调用。总之，只需要记住一点就行：视图解析器通过解析视图工厂（ViewDefinitionFactory）得到视图（ViewDefinition）。细节暂不用管。

拿到了视图，又该如何画出来呢？看下文。

组件渲染器类型

Angular 根据组件装饰器中定义的 ViewEncapsulation 模式来决定使用哪种 DOM 渲染器：

• Emulated Encapsulation Renderer

• Shadow Renderer

• Default Renderer

以上组件渲染器是通过 DomRendererFactory2 来创建的。componentRendererType 参数是在元素定义里被传入的，本例即是 jit__object_Object_5（注：上面代码里有这个对象，是 jit_elementDef3() 的最后一个参数），该参数是渲染器的一个基本描述符，用来决定使用哪一个渲染器渲染组件。其中，最重要的是视图封装模式和所用于组件的样式（注：componentRendererType 参数的结构是 RendererType2）：

function View_AppComponent_0(_l) {
    return jit_viewDef2(0, [
        jit_elementDef3(0, null, null, 1, 'a-comp', [], ...)
    ])
}

如果你为组件定义了样式，编译器会自动设置组件的封装模式为 ViewEncapsulation.Emulated，或者你可以在组件装饰器里显式设置 encapsulation 属性。如果没有设置任何样式，并且也没有显式设置 encapsulation 属性，那描述符会被设置为 ViewEncapsulation.Emulated，并被 忽略生效，使用这种描述符的组件会使用父组件的组件渲染器。

子指令

现在，最后一个问题是，如果我们像下面这样，把一个指令作用在组件模板上，会生成什么：

'a-comp' is not a known element:
1. If 'c-comp' is an Angular component, then ...
2. If 'c-comp' is a Web Component then add...

我们已经知道当为 AComponent 生成工厂函数时，编译器会为 a-comp 元素创建元素定义，会为 AComponent 类创建指令定义。但是由于编译器会为每一个指令生成指令定义节点，所以上面模板的工厂函数像这样（注：Angular v5.* 版本是会为 <a-comp></a-comp> 元素单独生成一个 *_Host.ngfactory.js 文件，表示宿主视图，多出来的 jit_directiveDef6(16384, null, 0, jit_ADirective8, [], ...) 是在这个文件代码里。可以 ng cli 新建项目查看 Sources Tab -> ng://。但作者表达的意思还是一样的。）：

@Directive({selector: 'a-comp'})
export class ADirective {}

上面代码都是我们熟悉的，仅仅是多添加了一个指令定义，和子组件数量增加为 2。

注：全文主要讲的是组件（视图）在 Angular 内部是如何用指令节点和元素节点定义的。

好了，本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。

function View_AppComponent_0(_l) {
    return jit_viewDef2(0, [
        jit_elementDef3(0, null, null, 1, 'a-comp', [], ...),
        jit_directiveDef4(16384, null, 0, jit_ADirective5, [],...)
    ], null, null);
}

@Component({
  selector: 'a-comp',
  template: '<span>I am A component</span>'
})
export class AComponent {}

function View_AppComponent_0() {
    return jit_viewDef2(0, [
        jit_elementDef3(0, null, null, 1, 'a-comp', [], ...
                    jit_View_AComponent_04, jit__object_Object_5),
        jit_directiveDef6(49152, null, 0, jit_AComponent7, [], ...)

16384 =  100000000000000 // 15th bit set
49152 = 1100000000000000 // 15th and 16th bit set

TypeDirective = 1 << 14

TypeDirective = 1 << 14
Component = 1 << 15

<span>I am A component</span>

function View_AComponent_0(_l) {
    return jit_viewDef1(0, [
        jit_elementDef2(0, null, null, 1, 'span', [], ...),
        jit_textDef3(null, ['I am A component'])

{
  styles:[["h1[_ngcontent-%COMP%] {color: green}"]], 
  encapsulation:0
}

<a-comp adir></a-comp>

function View_AppComponent_0() {
    return jit_viewDef2(0, [
        jit_elementDef3(0, null, null, 2, 'a-comp', [], ...
        jit_View_AComponent_04, jit__object_Object_5),

    jit_directiveDef6(49152, null, 0, jit_AComponent7, [], ...)
    jit_directiveDef6(16384, null, 0, jit_ADirective8, [], ...)

以上就是angularjs内部到底有没有组件？Angular内部组件的详细介绍的详细内容，更多请关注php中文网其它相关文章！