0

@angular/cli v7.0.3 で生成されたプロジェクトがあります。

ここに小さなデモ アプリケーションをプッシュしました: https://github.com/collinstevens/web-component-sender

@angular/elements と @webcomponents/webcomponentsjs ポリフィルを追加しました。

基本的な Angular コンポーネント AppComponent と、ReceiverComponent を Angular コンポーネントとして、web-receiver を Web コンポーネント タグとして使用する AppModule コンストラクターで定義された @angular/element を使用して構築された Web コンポーネントがあります。

AppComponent に入力すると、AppComponent と ReceiverComponent が更新された値で更新されることを期待しています。

現在、AppComponent のみが更新された値を受信して​​いますが、ReceiverComponent は AppComponent に設定された初期値のみを表示します。

https://angular.io/guide/elements#mappingを指定すると、ReceiverComponent の myValue Input() を my-value としてマップする必要があります。

AppComponent

export class AppComponent {
  value = '';
}

<div>
  <span>Angular Component Input:</span>
  <input [(ngModel)]="value">
</div>

<div>
  <span>Angular Component Span:</span>
  <span>{{value}}</span>
</div>

<div>
  <span>Web Component Span</span>
  <web-receiver [my-value]="value"></web-receiver>
</div>

ReceiverComponent

export class ReceiverComponent {
  @Input()
  myValue: string | undefined = undefined;
}

<span>{{myValue}}</span>

アプリモジュール

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, ReceiverComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent],
  entryComponents: [ReceiverComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const senderElement = createCustomElement(ReceiverComponent, {
      injector: this.injector
    });
    customElements.define('web-receiver', senderElement);
  }
}
4

1 に答える 1