Angular банан в коробке с веб-компонентами (ЛитЭлемент) - PullRequest
Новая
       45

Angular банан в коробке с веб-компонентами (ЛитЭлемент)

0 голосов
/ 13 февраля 2020

Я использую веб-компоненты LitElement с приложением angular

Я реализовал два способа привязки данных с отправкой CustomEvent, но я хотел бы использовать банан angular. Синтаксис in-a-box sugar.

Пример: this stackblitz : веб-компонент с целочисленным свойством, которое может быть увеличено внутри самого веб-компонента

Текущий синтаксис: 

<hello-world [counter]="counter" (counterChange)="counter = $event.detail.value"></hello-world>

Синтаксис, которого я хочу достичь: 

<hello-world [(counter)]="counter"></hello-world>

Когда я увеличиваю значение из веб-компонента, событие перехватывается angular, потому что имя события соответствует на имя свойства + Change (counterChange), но этому значению присваивается весь CustomEvent вместо значения $event.detail.value

Из того, что я прочитал в документации, angular достигает этого с моделью EventEmitter, которая согласно коду: rx js Subjects, я попытаюсь go этот маршрут вместо маршрута CustomEvent.

Если кто-нибудь знает, как этого добиться, я люблю с советы ome:)

Спасибо!

1 Ответ

0 голосов
/ 13 февраля 2020

В веб-компоненте привет-слово используйте

в html кнопку использования компонента с: 

button --> (counter)="handleCounter($event)"

@Output() counter = new EventEmitter<number>();

// .ts
handleCounter(ev){
    ev.stopPropagation();
    ev.preventDefault();
//Here you need to Increament and set value  
    this.counter.emit(value);
  }

и используйте компонент: 

<hello-world (counter)="onValueCounter($event)"></hello-world>

//.ts

  @Output() onCounter = new EventEmitter<any>();

  onValueCounter(term){
    this.onCounter .emit(term);
    console.log(term);
  }

Я надеюсь это поможет вам !!!

...