Angular 7.0 のスロットを使用したAngular要素でのコンテンツ プロジェクション

Angular 7.0 のスロットを使用したAngular要素でのコンテンツ プロジェクション

Angular 7 のスロットを持つAngular要素でのコンテンツ プロジェクションについて説明します。

3min read

この記事では、Angular要素にコンテンツを投影する方法を学びます。今のところ、次のリストに示すように、ng-contentを使用してコンテンツプロジェクションを実行することはご存知でしょう。

import { Component } from '@angular/core';
@Component({
    selector: 'app-greet',
    template: `
 <h2>{{title}}</h2>
 <ng-content></ng-content>
`
})
export class GreetComponent {
    title = 'Greet';
}

次のリストに示すように、コンテンツを投影することもできます。

<h1>Welcome to {{ title }}!</h1>
<app-greet>
      <h3>Hello Foo</h3>
</app-greet>

上記のアプローチの課題は、「GreetComponentをAngular要素として使用すると、コンテンツを投影できない」ことです。これをよりよく理解するために、まず GreetComponent をAngular要素に変換しましょう。 ここでは、 要素を作成するために ステップバイステップAngular。

GreetComponent をAngular要素として変換すると、AppModule は次のリストのようになります。

import { AppComponent } from './app.component';
import { GreetComponent } from './greet.component';
 
@NgModule({
    declarations: [
        AppComponent, GreetComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [GreetComponent],
    entryComponents: [GreetComponent]
})
export class AppModule {
 
    constructor(private injector: Injector) {
        const customElement = createCustomElement(GreetComponent, { injector });
        customElements.define('app-root', customElement);
    }
 
    ngDoBootstrap() {
 
    }
}

これで、以下のリストに示すように、index.htmlでGreetComponentを使用できます。

<body>
     <!-- <app-root></app-root> -->
     <app-greet>
         <h2>hey Foo</h2>
     </app-greet>
</body>

アプリケーションを実行すると、<h2>要素がAngular要素GreetComponentに射影されていないことがわかります。

アプリケーションを実行すると、<h2>要素がAngular要素 GreetComponent に投影されていません

Angular 7 以降、コンテンツ プロジェクション スロットを行う他のオプションがあります。Angular Element でコンテンツの投影を行うには、次の操作を行う必要があります。

  1. Set ViewEnacpsulation to ShadowDom
  2. <ng-contentの代わりにslotを使用します>

以下のリストに示すように、GreetComponentを変更しましょう。

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'app-greet',
    template: `
 <h2>{{title}}</h2>
 <slot name='message'></slot>
`,
    encapsulation: ViewEncapsulation.ShadowDom
})
export class GreetComponent {
    title = 'Greet Component';
}

カプセル化を ShadowDom に設定し、<ng-content> を <slot に置き換えました>

Angularは最初からシャドウドムを支援してきた。6.0 Angularまでは3つのカプセル化モードがありました

  1. Emulated
  2. Native
  3. None

エミュレートがデフォルトモードで、ネイティブモードを使用してShadow Dom V.0を作成しました。Angular 6.1からAngular Shadow Dom V.1をサポートし始めた。コンポーネントで Shadow Dom V.1 を有効にするには、4 番目のオプション ShadowDom を使用します。カプセル化をShadowDomに設定すると、Angular Shadow Dom V.1が作成されます。Angular Element でコンテンツの投影を行うには、カプセル化を ShadowDom に設定する必要があります。

アプリケーションを実行すると、次の図に示すようにコンテンツが投影されていることがわかります。

アプリケーションを実行すると、図に示すようにコンテンツが投影されていることがわかります

したがって、ShadowDom カプセル化モードとスロットを使用することで、Angular 7.0 のAngular Element にコンテンツを投影できます。 この投稿がお役に立てば幸いです。読んでくれてありがとう。 この投稿が気に入ったら、共有してください。また、Infragistics Ignite UI for Angular Componentsをまだチェックしていない場合は、必ずチェックしてください。50+ Material ベースのAngularコンポーネントがあり、Web アプリのコーディングを高速化できます。

Angular
デモを予約