角度要素の概要の例

比較のために、デモでは両方の方法を示しています。 1つのボタンは動的読み込み方法を使用してポップアップを追加し、もう1つのボタンはカスタム要素を使用します。結果は同じであることがわかります。準備だけが違います。

import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core'; import { animate, state, style, transition, trigger } from '@angular/animations'; @Component({ selector: 'my-popup', template: ` Popup: {{message}} ✖ `, animations: [ trigger('state', [ state('opened', style({transform: 'translateY(0%)'})), state('void, closed', style({transform: 'translateY(100%)', opacity: 0})), transition('* => *', animate('100ms ease-in')), ]) ], styles: [` :host { position: absolute; bottom: 0; left: 0; right: 0; background: #009cff; height: 48px; padding: 16px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid black; font-size: 24px; } button { border-radius: 50%; } `] }) export class PopupComponent { @HostBinding('@state') state: 'opened' | 'closed' = 'closed'; @Input() get message(): string { return this._message; } set message(message: string) { this._message = message; this.state = 'opened'; } private _message: string; @Output() closed = new EventEmitter(); }

import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector } from '@angular/core'; import { NgElement, WithProperties } from '@angular/elements'; import { PopupComponent } from './popup.component'; @Injectable() export class PopupService { constructor(private injector: Injector, private applicationRef: ApplicationRef, private componentFactoryResolver: ComponentFactoryResolver) {} // Previous dynamic-loading method required you to set up infrastructure // before adding the popup to the DOM. showAsComponent(message: string) { // Create element const popup = document.createElement('popup-component'); // Create the component and wire it up with the element const factory = this.componentFactoryResolver.resolveComponentFactory(PopupComponent); const popupComponentRef = factory.create(this.injector, [], popup); // Attach to the view so that the change detector knows to run this.applicationRef.attachView(popupComponentRef.hostView); // Listen to the close event popupComponentRef.instance.closed.subscribe(() => { document.body.removeChild(popup); this.applicationRef.detachView(popupComponentRef.hostView); }); // Set the message popupComponentRef.instance.message = message; // Add to the DOM document.body.appendChild(popup); } // This uses the new custom-element method to add the popup to the DOM. showAsElement(message: string) { // Create element const popupEl: NgElement & WithProperties = document.createElement('popup-element') as any; // Listen to the close event popupEl.addEventListener('closed', () => document.body.removeChild(popupEl)); // Set the message popupEl.message = message; // Add to the DOM document.body.appendChild(popupEl); } }

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { PopupComponent } from './popup.component'; import { PopupService } from './popup.service'; // Include the `PopupService` provider, // but exclude `PopupComponent` from compilation, // because it will be added dynamically. @NgModule({ imports: [BrowserModule, BrowserAnimationsModule], providers: [PopupService], declarations: [AppComponent, PopupComponent], bootstrap: [AppComponent], entryComponents: [PopupComponent], }) export class AppModule { }

import { Component, Injector } from '@angular/core'; import { createCustomElement } from '@angular/elements'; import { PopupService } from './popup.service'; import { PopupComponent } from './popup.component'; @Component({ selector: 'app-root', template: ` Show as component Show as element `, }) export class AppComponent { constructor(injector: Injector, public popup: PopupService) { // Convert `PopupComponent` to a custom element. const PopupElement = createCustomElement(PopupComponent, {injector}); // Register the custom element with the browser. customElements.define('popup-element', PopupElement); } }

カスタム要素の入力

などの一般的なDOMAPIdocument.createElement（）またはdocument.querySelector（）は、指定された引数に適切な要素タイプを返します。たとえば、document.createElement（ 'a'）はTypeScriptが知っているHTMLAnchorElementにはhrefプロパティ。同様に、document.createElement（ 'div'）はTypeScriptが知っているHTMLDivElementにはhrefプロパティ。

@Component(...) class MyDialog { @Input() content: string; }

const aDialog = document.createElement('my-dialog') as NgElement & WithProperties; aDialog.content = 'Hello, world!'; aDialog.content = 123; // <-- ERROR: TypeScript knows this should be a string. aDialog.body = 'News'; // <-- ERROR: TypeScript knows there is no `body` property on `aDialog`.

declare global { interface HTMLElementTagNameMap { 'my-dialog': NgElement & WithProperties; 'my-other-element': NgElement & WithProperties; ... } }

document.createElement('div') //--> HTMLDivElement (built-in element) document.querySelector('foo') //--> Element (unknown element) document.createElement('my-dialog') //--> NgElement & WithProperties (custom element) document.querySelector('my-other-element') //--> NgElement & WithProperties (custom element)