angular - 从数据源到查看@angular/elements 的目标数据绑定的一种方式

Question

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

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

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

我有一个基本的 Angular 组件 AppComponent 和一个使用在 AppModule 构造函数中定义的 @angular/element 构建的 Web 组件，使用 ReceiverComponent 作为 Angular 组件，web-receiver 作为 Web 组件标签。

我希望当我输入 AppComponent 时，它将使用更新的值更新 AppComponent 和 ReceiverComponent。

目前，只有 AppComponent 正在接收更新的值，而 ReceiverComponent 将只显示 AppComponent 中设置的初始值。

给定https://angular.io/guide/elements#mapping，ReceiverComponent 上的 myValue Input() 应映射为 my-value。

应用组件

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>

接收器组件

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

Answer 1

这可以完成工作：

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

原因是 Angular 绑定到 (j​​avascript) 属性。