Question

我有一个使用@ angular / cli v7.0.3生成的项目。

我在此处推送了一个小型演示应用程序：https://github.com/collinstevens/web-component-sender

我添加了@ angular / elements和@ webcomponents / webcomponentsjs polyfill。

我有一个基本的Angular组件AppComponent和一个Web组件，该Web组件是使用AppModule构造函数中定义的@ angular / element构建的，使用ReceiverComponent作为Angular组件，并使用web-receiver作为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>

AppModule

@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);
  }
}

Answer 1

这可以完成工作：

<web-receiver [myValue]="value"></web-receiver>

原因是Angular绑定到（javascript）属性。

从数据源单向查看@ angular / elements的目标数据绑定

1 个答案: