本篇文章主要的向大家介紹了關於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登入後複製
瀏覽器會使用HTMLUnknownElement 介面來建立a-comp 元素，這個介面又繼承HTMLElement 接口，但是它不需要實作任何屬性或方法。你可以使用 CSS 來裝飾它，也可以為它添加事件監聽器來監聽一些普遍事件，例如 click 事件。所以正如我所說的，a-comp 是一個完全合法的 DOM 元素。
然後，你可以把它轉變成自訂DOM 元素 來增強這個元素，你需要為它單獨建立一個類別並使用JS API 來註冊這個類別：
class AComponent extends HTMLElement {...}
window.customElements.define('a-comp', AComponent);登入後複製
這是不是跟你一直在做的事情有些類似呀。
没错，这和你在 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 渲染器：
以上组件渲染器是通过 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。
注：全文主要讲的是组件（视图）在 Angular 内部是如何用指令节点和元素节点定义的。
好了，本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。
以上是angularjs內部到底有沒有元件？ Angular內部組件的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
