最初のAngular要素を作るためのステップバイステップ

最初のAngular要素を作るためのステップバイステップ

Angular Elementsを使用すると、Angularアプリの外部で使用できる再利用可能なAngularコントロールを作成できます。最初の要素を作成する方法を学びます。

4分の読書

Angular Elementsは、Angularアプリケーション外でも使用できる再利用可能なAngularコンポーネントを作成することを可能にします。Angular要素は通常のHTML、Reactなど他のアプリケーションでも使えます。 本質的に、Angular要素は通常のコンポーネントであり、カスタム要素としてパッケージ化されています。カスタム要素についてはこちらで詳しく知ることができます。

Angular要素は再利用可能なコンポーネントであり、Angular外で使用できます。 詳細はこちらについて学べます

この投稿ではシンプルにし、ステップバイステップで基本的なAngular要素の作成方法を学びます。それでは、始めましょう。

Step 1: Installation

Angular CLIを使って新しいプロジェクトを作成する

ng new demo1

プロジェクトが作成されたら、ディレクトリをdemo1に変更し、Angular Elementsをインストールします。そのために、以下のようにnpmコマンドを実行します。

npm install @angular/elements

古いブラウザで動作するにはポリフィルが必要です。では、以下のようにそれもインストールしましょう。

npm install @webcomponents/custom-elements

ポリフィルを設置した後、ファイルを開いて次の2つのエントリを追加polyfills.ts​

import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

ステップ2:コンポーネントの作成

このステップでは、Angular要素として再利用可能なコンポーネントを作成します。

import { Component, Input } from '@angular/core';
 
  @Component({
      selector: 'app-message',
      template: `
 <h1 style='text-center'>{{title}}</h1>
  <h2>hey {{name}} loving Angular Elements {{answer}}</h2>
`,
      styles: ['h2 {color:red;}']
  })
  export class MessageComponent {
      title = 'Angular Elements';
      @Input() name: string;
      @Input() answer: string;
  }

MessageComponentは非常にシンプルなコンポーネントで、2つのプロパティを @Input() デコレーターで装飾しています。

ステップ3:コンポーネントの登録

コンポーネントをAngular要素として登録するには、以下のタスクを実行する必要があります。

  • インポートコンポーネント。
  • Pass it in declarations array.
  • entryComponents配列にコンポーネントをパスします。
  • ブートストラップ配列内のコンポーネントは絶対に渡さないでください。
import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { MessageComponent } from './message.component';
 
 @NgModule({
     declarations: [
         MessageComponent
     ],
     imports: [
         BrowserModule
     ],
     providers: [],
     bootstrap: [],
     entryComponents: [MessageComponent]
 })
 export class AppModule {
 
 }

カスタム要素をブートストラップする必要はありません。DOMに追加されると自動的に作成され、DOMから削除されると破棄されますが、何らかの方法で作成しなければならず、entryComponents配列に追加しています。この性質は動的コンポーネントから知っているに違いありません。

ステップ4:コンポーネントから要素を作成する

​createCustomElementを呼び出して、Angularコンポーネントからカスタム要素を作成する必要があります。そのためには、まずangular.module.tsの以下のアイテムをインポートしてください。

import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

必要なモジュールをAppModuleにインポートした後、以下のリストに示すようにカスタム要素を作成する必要があります。また、手動でngDoBootstrapを呼び出しています。

export class AppModule {
 
      constructor(private injector: Injector) {
          const customElement = createCustomElement(MessageComponent, { injector });
          customElements.define('app-message', customElement);
      }
 
      ngDoBootstrap() {
 
      }
  }

Step 5: Use Custom Element

理想的には、任意の外部HTMLファイルでカスタム要素を使いたいです。その点については、別の記事で詳しく触れます。同じAngularアプリケーションのindex.htmlで作成したカスタム要素を使用するには、以下のようにボディに配置するだけです。

<body>
        <!-- <app-root></app-root> -->
        <app-message name="dj" answer="yes"></app-message>
</body>

次にコマンドng serveでアプリケーションを実行し、下の画像のようにカスタム要素がレンダリングされるはずです。

アプリケーションはコマンドNG Serveを使っていて、カスタム要素はレンダリングされているはずです

したがって、カスタム要素を扱うには以下の手順Angular実行する必要があると結論づけられます。

  1. Install @angular/elements
  2. コンポーネントを作成
  3. entryComponent内のレジスタコンポーネント
  4. Invoke createElement to create custom element
  5. HTMLで使ってください

この投稿が役に立てば幸いです。読んでくださってありがとうございます。 もしこの投稿が気に入ったら、ぜひシェアしてください。また、Infragistics Ignite UI for Angular Componentsをまだチェックしていない方は、ぜひチェックしてください!30+のマテリアルベースのAngularコンポーネントがあり、ウェブアプリをより速くコーディングするのに役立ちます。

Angular
デモを予約