Angular Elements 組件在非angular 頁面中使用的DEMO

時間 2019-12-07

標籤 angular elements 組件頁面使用 demo 欄目 AngularJS 简体版

原文原文鏈接

1、Angular Elements 介紹

Angular Elements 是伴隨Angular6.0一塊兒推出的新技術。它藉助Chrome瀏覽器的ShadowDom API，實現一種自定義組件。這種組件能夠用Angular普通組件的開發技術進行編寫，學習成本低，當它構建好後生成一個打包的js文件。若是頁面引入該Js文件，就至關於在頁面中新增了一個標籤，因此在任意框架中均可以使用新標籤，就像它是原生div同樣。css

ShadowDom API 是谷歌本身一直強推的API，也一直未標準化的技術。2013年推出的chrome25中，就支持Shadow Dom v0的API,至今都沒有其它瀏覽器附和谷歌的。2016年的chrome53時，谷歌又推出了Shadow Dom v1的API。v1版本彷佛將成正式標準，就連Edge都是都示正在考慮。不管v0,v1版本，如今都是草案的狀態，距離正式標準還很遠。幸運的是，如今有個項目@webcomponents/custom-elements提供polyfill技術方案，能讓其它瀏覽器提早用上該技術。html

2、Angular Elements 使用實戰

前不久看到項目angular-elements-dashboard ：支持動態加載模塊和動態加載外部的模塊。其中加載動態外部模塊就是先編譯一個angular elements項目，而後動態把該bundle.js插入到頁面中。因而我就嘗試一下，看這個構建的angular elements 文件到底若是引入一個空白的頁面中，引入後的組件在瀏覽器中又是如何呈現的。html5

Demo 源文件在碼雲：https://gitee.com/40288193/Angualr-elements-demo jquery

頁面結構： git

demo.html	主文件是一個標準的html5頁面
external-dashboard-tile.emulated.js github external-dashboard-tile.native.js web	是angular elements 用兩種組件封裝的方式打包的結果，分別是ViewEncapsulation.Emulated和 ViewEncapsulation.Native封裝。它們也是今天的測試主要對象。
custom-elements.min.js	@webcomponents/custom-elements 的文件，是Shadow Dom v1 的polyfill文件。若是用chrome53之後的瀏覽器的話，能夠不引入它。若是是其它瀏覽器，它是必須的。
native-shim.js	若是angular elements項目打包時，tsconfig.json中，編譯參數 target: "es5"時，全部的class都被編譯爲function,此時就必須引入該文件。編譯參數 target:"es2015"或更高級的模塊時，則不須要引入它。根本緣由是，Shadow Dom v1的api 只支持自定義元素是一個class類型，不能是一個function。
zone.js	angular依賴的文件

頁面代碼：chrome

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Angular Elements 演示Demo</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
</head>
<body class="container">
  <h1>Angular Elements 演示Demo</h1>
  <div class="row">
    <h3>原生JS插入一個自定義元素</h3>
    <div id="byJs"></div>
  </div>
  <div class="row">
    <h3>用jqyery插入一個自定義元素</h3>
    <div id="byJquery"></div>
  </div>
  <script src="./zone.js"></script>
  <script src="./custom-elements.min.js"></script>
  <script src="./native-shim.js"></script>
  <script src="./jquery.min.js"></script>
  <script src="./external-dashboard-tile.native.js"></script>
  <script>
    // 新引入的external-dashboard-tile元素，  它有三個屬性a,b,c，它展現爲一個表格

    // 原生JS插入
    const dom = document.createElement("external-dashboard-tile"), byJs = document.getElementById("byJs");
    dom.classList.add("col-sm-2");
    dom.setAttribute('a', '' + Math.round(Math.random() * 100));
    dom.setAttribute('b', '' + Math.round(Math.random() * 100));
    dom.setAttribute('c', '' + Math.round(Math.random() * 100));

    byJs.appendChild(dom);

    // Jquery 插入
    const $dom = $("<external-dashboard-tile>"), $byJquery = $("#byJquery");
    $dom.addClass("col-sm-2");
    $dom.attr("a", Math.round(Math.random() * 100));
    $dom.attr("b", Math.round(Math.random() * 100));
    $dom.attr("c", Math.round(Math.random() * 100));

    $byJquery.append($dom);

    // 定時去修改兩個表格的某個列
    setInterval(function () {
      dom.setAttribute('b', '' + Math.round(Math.random() * 100));
      $dom.attr("a", Math.round(Math.random() * 100));
    }, 2000)
  </script>
</body>

</html>

效果：npm

注意：上下兩個組件中，a,b兩個列是定時變化的。json

3、Angular Elements應用頁面的分析

代碼邏輯估計小學生也看的懂了，分別用原生JS 和 jquery 兩種技術，生成<external-dashboard-tile>元素，而且設置元素的class 和屬性，最後插入到頁面上。最後寫個定時器，分別用兩種技術定時修改它們的一個屬性。

當我引入external-dashboard-tile.emulated.js 文件時，它是angular模擬組件的方式插入頁面的，就是自定義標籤裏直接嵌入了div,這種模式並非真正的Shadow Dom ，它只是一種模擬手段，它經過引入_ng_content-c0的屬性空間隔離css 樣式。

當我引入external-dashboard-tile.native.js 文件時,就是用原生的方式引入了，看效果，頁面上有了 #showdow-root節點,而且外部的bootstrap樣式傳遞不進去了，形成組件的樣式全無。

總結一下，經過使用兩個種方式操做自定義元素和之前學習的內置元素的概念如出一轍。那麼就是說一個angular elements技術打包好的組件能夠： build once ,run any framework! 這個黑科技仍是讓人驚喜的。

Angular Elements的開發技術和Angular普通組件是一致的，像Input屬性，Output事件，依賴注入的支持，內容投影的支持（這個好像要用<slot> 來作) ,總之並無由於 Angular Elements須要脫離ng環境，沒有Module 沒有Route等支持，它就閹割功能，添加限制。沒有，所有沒有, 這一點谷歌仍是良心。

4、Angular Elements應用後記

組件封裝方式分別是native，emulated 。按照之前看的文章說明，Native模式其實用的是Shadow Dom v0,並非最新的技術，在2018.7.25號的6.1.0升級中，它又引入了新的封裝方式ViewEncapsulation.Shadow 。它的目的是爲了避免改變Native的模式狀況下，引入最新的Shadow Dom v1技術，而Native已通過時，不鼓勵使用。詳見 (#24718)

如今這種打包模式，對於一個最簡單的組件，打包後體積是189kb，是很是之大的。聽說伴隨angular 7推出的ivy 渲染引擎能大大減少組件的構建體積，忘在哪一個視頻中看到說打包後可到10kb的量級，但如今找不到該說法的來源。如今angular的commit中，有一半都是關於ivy的提交，只須要你們靜等angular 7.0的到來了！

如今相關資料還比較少，我也是看youtube視頻學習的相關介紹，下面給你們幾個學習資料

官方文檔：https://www.angular.cn/guide/elements

視頻 Elements in v6 and Beyond ：https://www.youtube.com/watch?v=Z1gLFPLVJjY

示例項目angular-elements-dashboard：https://github.com/manfredsteyer/angular-elements-dashboard