Anglejs 내부에 구성요소가 있나요? Angular 내부 구성 요소에 대한 자세한 소개-JS 튜토리얼-php.cn

이 글은 주로 angularjs 내부의 컴포넌트에 대한 질문을 소개하고 있는데, 그 답이 궁금하신 분이라면 누구나 읽어보실 수 있습니다. 이제 이 글을 함께 읽어보세요. angularjs 문제 설명:

Angular

를 사용하기 시작한 이후로 구성 요소와 지침의 차이로 인해 혼란스러워졌습니다. 특히 Angular.js 세계에서 온 사람들의 경우 Angular.js에는 지침만 있기 때문입니다. 우리는 종종 그것을 구성 요소로 사용합니다. 이 문제에 대한 설명을 인터넷에서 검색해 보면 다음과 같이 설명하는 분들이 많습니다.

이러한 설명은 맞는 것 같습니다. 컴포넌트를 컴파일하기 위해 Angular 컴파일러에서 생성한 뷰 팩토리 소스 코드를 살펴보니 그렇지 않았습니다. 구성 요소 정의를 찾으면 명령 검색

만 표시됩니다.

참고: Angular-CLI ng new를 사용하여 새 프로젝트를 생성합니다. ng Serve를 실행하여 프로그램을 실행한 후 Source의 ng:// 도메인 아래에서 컴포넌트를 컴파일한 후 생성된 **.ngfactory.js를 볼 수 있습니다. Chrome Dev Tools. 파일의 탭에서 이 파일의 코드는 위에서 언급한 뷰 팩토리 소스 코드입니다.

하지만 인터넷에서

이유에 대한 설명

을 찾지 못했습니다. 이유를 알고 싶다면 위의 문제로 인해 오랫동안 어려움을 겪었다면 Angular의 내부 작동 원리를 잘 알고 있어야 하기 때문입니다. 그렇다면 이 글은 당신을 위한 것입니다. 함께 미스터리를 발견하고 준비합시다.

본질적으로 이 글에서는 Angular 내부적으로 컴포넌트와 지시문이 어떻게 정의되는지를 주로 설명하고, 새로운 뷰 노드 정의인 지시어 정의를 소개합니다.

참고: 뷰 노드에는 요소 노드와 텍스트 노드도 포함되어 있습니다. 관심이 있으시면 Translated Angular DOM 업데이트 메커니즘

을 확인해 보세요.

View

내가 전에 쓴 글, 특히

번역된 Angular DOM 업데이트 메커니즘

을 읽어보신 분이라면 Angular 프로그램 내부가 뷰 트리이고 각 뷰는 뷰 팩토리에 의해 생성된다는 점을 아실 것입니다. 각 뷰에는 특정 기능을 가진 다양한 뷰 노드가 포함되어 있습니다. 방금 언급한 기사(해당 기사는 이 기사를 이해하는 데 매우 중요함)에서 두 가지 가장 간단한 노드 유형인 요소 노드 정의와 텍스트 노드 정의를 소개했습니다. 요소 노드 정의는 모든

DOM 요소 노드를 만드는 데 사용되는 반면, 텍스트 노드 정의는 모든 DOM 텍스트 노드를 만드는 데 사용됩니다. 따라서 다음과 같은 템플릿을 작성하면

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

로그인 후 복사

Angular Compiler

는 이 템플릿을 컴파일하고 두 개의 요소 노드, 즉 p 및 h1 DOM 요소를 생성합니다. 텍스트 노드인 Hello {{name}} DOM 텍스트입니다. 이 노드가 없으면 화면에 아무 것도 표시되지 않기 때문에 이는 중요한 노드입니다. 그러나 구성 요소 구성 패턴은 구성 요소가 중첩될 수 있으므로 구성 요소를 포함하려면 다른 뷰 노드가 있어야 함을 알려줍니다. 이러한 특수 노드가 무엇인지 파악하려면 먼저 어떤 구성 요소로 구성되어 있는지 이해해야 합니다. 본질적으로 구성 요소는 본질적으로 특정 동작을 가진 DOM 요소이며 이러한 동작은 구성 요소 클래스에서 구현됩니다. 먼저 DOM 요소를 살펴보겠습니다.

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

自定义 DOM 元素

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

&lt;a-comp&gt;&lt;/a-comp&gt;

로그인 후 복사

然后查询这个 DOM 节点并检查类型，你会发现它是个完全合法的 DOM 元素（注：你可以在一个 html 文件里试试这部分代码，甚至可以写上 <a-comp>A Component</a-comp>，结果是可以运行的，原因见下文）：

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

로그인 후 복사

浏览器会使用 HTMLUnknownElement 接口来创建 a-comp 元素，这个接口又继承 HTMLElement 接口，但是它不需要实现任何属性或方法。你可以使用 CSS 来装饰它，也可以给它添加事件监听器来监听一些普遍事件，比如 click 事件。所以正如我说的，a-compHTML에서 새 HTML 태그를 생성할 수 있다는 것을 알고 계실 것입니다. 예를 들어 프레임을 사용하지 않는 경우 html에 새 태그를 직접 삽입할 수 있습니다.

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

로그인 후 복사

그런 다음 이 DOM 노드를 쿼리하세요. 유형을 확인하면 그것이 완벽하게 유효한 DOM 요소라는 것을 알 수 있습니다. (참고: HTML 파일에서 이 코드 부분을 시도하거나 <a-comp>A Component</a-라고 작성할 수도 있습니다. comp> , 결과는 실행 가능합니다. 이유는 아래를 참조하세요.

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

로그인 후 복사

브라우저는

HTMLUnknownElement

인터페이스를 사용하여 a-comp 요소를 생성합니다.

HTMLElement🎜 인터페이스이지만 속성이나 메서드를 구현할 필요는 없습니다. CSS를 사용하여 장식하거나 이벤트 리스너를 추가하여 클릭 이벤트와 같은 몇 가지 일반적인 이벤트를 수신할 수 있습니다. 앞서 말했듯이 a-comp는 완벽하게 합법적인 DOM 요소입니다. 🎜🎜그런 다음 이를 🎜사용자 정의 DOM 요소🎜로 변환할 수 있습니다. 이 요소를 향상하려면 별도의 클래스를 만들고 JS API를 사용하여 이 클래스를 등록해야 합니다. 🎜

'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...

로그인 후 복사

🎜이게 지금까지 해온 일인가요? 다소 비슷합니다. 🎜

没错，这和你在 Angular 中定义一个组件非常类似，实际上，Angular 框架严格遵循 Web 组件标准但是为我们简化了很多事情，所以我们不必自己创建 shadow root 并挂载到宿主元素（注：关于 shadow root 的概念网上资料很多，其实在 Chrome Dev Tools 里，点击右上角 settings，然后点击 Preferences -> Elements，打开 Show user agent shadow root 后，这样你就可以在 Elements 面板里看到很多 DOM 元素下的 shadow root）。然而，我们在 Angular 中创建的组件并没有注册为自定义元素，它会被 Angular 以特定方式去处理。如果你对没有框架时如何创建组件很好奇，你可以查看 Custom Elements v1: Reusable Web Components 。

现在已经知道，我们可以创建任何一个 HTML 标签并在模板里使用它。所以，如果我们在 Angular 的组件模板里使用这个标签，框架将会给这个标签创建元素定义（注：这是由 Angular Compiler 编译生成的）：

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

로그인 후 복사

然而，你得需要在 module 或组件装饰器属性里添加 schemas: [CUSTOM_ELEMENTS_SCHEMA]，来告诉 Angular 你在使用自定义元素，否则 Angular Compiler 会抛出错误（注：所以如果需要使用某个组件，你不得不在 module.declarations 或 module.entryComponents 或 component.entryComponents 去注册这个组件）：

'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...

로그인 후 복사

所以，我们已经有了 DOM 元素但是还没有附着在元素上的类呢，那 Angular 里除了组件外还有其他特殊类没？当然有——指令。让我们看看指令有些啥。

指令定义

你可能知道每一个指令都有一个选择器，用来挂载到特定的 DOM 元素上。大多数指令使用属性选择器（attribute selectors），但是有一些也选择元素选择器（element selectors）。实际上，Angular 表单指令就是使用 元素选择器 form 来把特定行为附着在 html form元素上。

所以，让我们创建一个空指令类，并把它附着在自定义元素上，再看看视图定义是什么样的：

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

로그인 후 복사

然后核查下生成的视图工厂：

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

로그인 후 복사

现在 Angular Compiler 在视图定义函数的第二个参数数组里，添加了新生成的指令定义 jit_directiveDef4 节点，并放在元素定义节点 jit_elementDef3 后面。同时设置元素定义的 childCount 为 1，因为附着在元素上的所有指令都会被看做该元素的子元素。

指令定义是个很简单的节点定义，它是由 directiveDef 函数生成的，该函数参数列表如下（注：现在 Angular v5.x 版本略有不同）：

Name	Description
matchedQueries	used when querying child nodes
childCount	specifies how many children the current element have
ctor	reference to the component or directive constructor
deps	an array of constructor dependencies
props	an array of input property bindings
outputs	an array of output property bindings

本文我们只对 ctor 参数感兴趣，它仅仅是我们定义的 ADirective 类的引用。当 Angular 创建指令对象时，它会实例化一个指令类，并存储在视图节点的 provider data 属性里。

所以我们看到组件其实仅仅是一个元素定义加上一个指令定义，但仅仅如此么？你可能知道 Angular 总是没那么简单啊！

组件展示

从上文知道，我们可以通过创建一个自定义元素和附着在该元素上的指令，来模拟创建出一个组件。让我们定义一个真实的组件，并把由该组件编译生成的视图工厂类，与我们上面实验性的视图工厂类做个比较：

@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, [], ...)

로그인 후 복사

好的，现在我们仅仅验证了上文所说的。本示例中， Angular 使用两种视图节点来表示组件——元素节点定义和指令节点定义。但是当使用一个真实的组件时，就会发现这两个节点定义的参数列表还是有些不同的。让我们看看有哪些不同吧。

节点类型

节点类型（NodeFlags）是所有节点定义函数的第一个参数（注：最新 Angular v5.* 中参数列表有点点不一样，如 directiveDef 中第二个参数才是 NodeFlags）。它实际上是 NodeFlags 位掩码（注：查看源码，是用二进制表示的），包含一系列特定的节点信息，大部分在 变更检测循环 时被框架使用。并且不同节点类型采用不同数字：16384 表示简单指令节点类型（注：仅仅是指令，可看 TypeDirective）；49152 表示组件指令节点类型（注：组件加指令，即 TypeDirective + Component）。为了更好理解这些标志位是如何被编译器设置的，让我们先转换为二进制：

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

로그인 후 복사

如果你很好奇这些转换是怎么做的，可以查看我写的文章 The simple math behind decimal-binary conversion algorithms 。所以，对于简单指令 Angular 编译器会设置 15-th 位为 1：

TypeDirective = 1 << 14

로그인 후 복사

而对于组件节点会设置 15-th 和 16-th 位为 1：

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

로그인 후 복사

现在明白为何这些数字不同了。对于指令来说，生成的节点被标记为 TypeDirective 节点；对于组件指令来说，生成的节点除了被标记为 TypeDirective 节点，还被标记为 Component 节点。（想看更多就到PHP中文网AngularJS使用手册中学习）

视图定义解析器

因为 a-comp 是一个组件，所以对于下面的简单模板：

<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'])

로그인 후 복사

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

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

组件渲染器类型

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

Emulated Encapsulation Renderer
Shadow Renderer
Default Renderer

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

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

로그인 후 복사

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

子指令

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

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

로그인 후 복사

我们已经知道当为 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://。但作者表达的意思还是一样的。）：

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, [], ...)

로그인 후 복사

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