В одну сторону от источника данных для просмотра привязки целевых данных для @ angular / elements - PullRequest
Новая
       10

В одну сторону от источника данных для просмотра привязки целевых данных для @ angular / elements

0 голосов
/ 26 октября 2018

У меня есть проект, созданный с помощью @ angular / cli v7.0.3.

Я поместил здесь небольшое демонстрационное приложение: https://github.com/collinstevens/web-component-sender

Я добавил @ angular / elements и полифилл @ webcomponents / webcomponentsjs.

У меня есть базовый компонент Angular, AppComponent и веб-компонент, построенный с использованием @ angular / element, определенного в конструкторе AppModule, с использованием ReceiverComponent в качестве компонента Angular и веб-приемника в качестве тега веб-компонента.

Я ожидаю, что когда я введу в AppComponent, он обновит AppComponent и ReceiverComponent с обновленным значением.

В настоящее время только AppComponent получает обновленное значение, тогда как ReceiverComponent будет отображать только начальное значение, установленное в AppComponent.

Учитывая https://angular.io/guide/elements#mapping, myValue Input () на ReceiverComponent должен быть отображен как my-value.

*

AppComponent 1018 * 

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

1 Ответ

0 голосов
/ 26 октября 2018

Это делает работу: 

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

Причина в том, что Angular связывается с (javascript) свойствами.

...