必要に応じて、AngularコンポーネントをReact、Vue、さらにjQueryに実装します

npmでクールなコンポーネントを見つけたが、接頭辞がng、ngx、angularなどである場合は、これについて動揺しないでください。 このコンポーネントを入手するには、多くの解決策があります。 この記事では、Angularチームによって公式にサポートされているソリューション、つまりAngular Elementsについて検討します。



実際には、 Awesome Angularから任意のコンポーネントを選択してください。



シンプルだが非常に興味深い-ngx-avatarを選択しました。 次に、さまざまなソーシャルネットワークのアバターを表示するか、単にユーザーのイニシャルを表示します。

このようなもの：





そして彼はシンプルなAPIを持っています。ここに小さな例を示します：

<ngx-avatar facebookId="1508319875"></ngx-avatar> <ngx-avatar src="assets/avatar.jpg"></ngx-avatar> <ngx-avatar name="John Doe"></ngx-avatar>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それで、このためのAngularプロジェクトを作成してライブラリを接続しましょう。

 ng new avatar-lib --minimalN npm i ngx-avatar --save
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

パッケージをモジュールに接続します。

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // Import your AvatarModule import { AvatarModule } from 'ngx-avatar'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, // Specify AvatarModule as an import AvatarModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デフォルトで `AvatarModule`はその唯一のコンポーネントをエクスポートしないため、単純なコンポーネントを作成しましょう。

 ng gc avatar
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 import { Component, ViewEncapsulation, Input } from '@angular/core'; @Component({ selector: 'app-avatar', template: ` <ngx-avatar [name]="name"></ngx-avatar> `, styles: [], encapsulation: ViewEncapsulation.ShadowDom }) export class AvatarComponent { @Input() name: string; constructor() { } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

簡単にするために、入力パラメーターの1つのみを使用しました。



これらすべてからユニバーサルコンポーネントを作成します。 要素を機能させるには、プロジェクトに角度要素を追加する必要があります。

 ng add @angular/elements
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

とりわけ、このコマンドには、スクリプトセクションにカスタム要素を登録するための簡易バージョンも含まれます。

 "scripts": [{ "input": "node_modules/document-register-element/build/document-register-element.js" }]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果のapp.module.ts：

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule, Injector } from '@angular/core'; import { createCustomElement } from '@angular/elements'; import { AvatarComponent } from './avatar.component'; import { AvatarModule } from 'ngx-avatar'; @NgModule({ declarations: [AvatarComponent], imports: [AvatarModule, BrowserModule], entryComponents: [AvatarComponent] }) export class AppModule { constructor(private injector: Injector) { //    Angular Element const avatarComponent = createCustomElement(AvatarComponent, { injector }); //     customElements.define('avatar-lib', avatarComponent); } ngDoBootstrap() {} }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

いいね！ 今、私たちはこのすべての善を集める必要があります。 これを行うには、コンポーネントを1つのjsファイルにパックする独自のコレクターを作成します。

 const fs = require('fs-extra'); const concat = require('concat'); (async function build() { const files = [ './dist/avatar-lib/runtime.js', './dist/avatar-lib/polyfills.js', './dist/avatar-lib/scripts.js', './dist/avatar-lib/main.js' ]; await fs.ensureDir('elements'); await concat(files, 'elements/avatar-lib.js'); })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべて準備完了です！ 収集するだけです。 このようなスクリプトをpackage.jsonに追加します。

 "build:elements": "ng build --prod --output-hashing none && node build.js"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、それだけです！ そのようなjsファイル `avatar-lib.js`の重量は、221 kBからgzipで60 KBです。 当然、より多くの角度 /コアが含まれています。 ngx-avatar自体の重量は、gzipで約16.8kBと5.4kBです。 avatar-lib.jsの重量を大幅に削減するには、Ivy Compilerが必要ですが、これは別の記事のトピックです。 （この時点でIvyがリリースされるか、現在入手可能なものから手動で収集することを望みます）。



Angular Elementsは私たちに何を与えましたか？



これは、Webコンポーネントを実装するための便利なAPIです。 実際、それなしでもできます。 以前に何ができたかをご覧ください： Jia Liの記事（現在Zone.jsに積極的に付属しています） 。



コンポーネントを他のフレームワークに埋め込みます。



Vueで最初に。 便利な方法で接続し、avatar-libをテンプレートに挿入し、標準のvue bingを介してデータを転送します。

 <avatar-lib :name = 'myName'></avatar-lib>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Outputイベントを整理することも可能です。



Vueデモ： https : //github.com/Jamaks/angular-element/tree/master/ang-el-vue



Reactの時間です！ すべてが同じくらい簡単です：

 <avatar-lib name = {this.myName}></avatar-lib>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

React Demo



まあ、一般的に、プロジェクト



現時点でのブラウザのサポートに関して：



https://angular.io/guide/elements#browser-support-for-custom-elements

https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define



もちろん、この実装方法を使用するかどうかはあなた次第です。 UIコンポーネントは何にもアタッチせず、同様のサフィックス（ng-、ngx-、v-、react-、rc-など）を付けないようにします。



ボーナス！



コンポーネント（ngx-avatar）のサイズに触発されて、私はまだngtsc、ngccをフィードしてから、ロールアップを使用してアセンブルしようとしました。 しかし、選択したコンポーネントには多くの外部モジュールが必要だったため、試行は失敗しました。 絶望的で、このコンポーネントにいくらか似ていて、その結果はうれしい驚きでした-現時点（7.1.2）では、ライブラリはgzipで〜96kbと〜26kbでした。 当然のことながら、多くの依存関係があり、私のロールアップ構成には多くの要望が残されています。 しかし、それでも、これはIvyのプレゼンテーション中に表示された3kbではありません。 ngccをWebpack（cli）に展開し、ドキュメントを作成するときは、期待されることです。



また、Angularの世界から小さな実験やインサイダーを見つけることもできます 。