Настройка прослушивателя событий для веб-компонента «Экспортированные угловые элементы» - PullRequest
Новая
       62

Настройка прослушивателя событий для веб-компонента «Экспортированные угловые элементы»

0 голосов
/ 03 ноября 2019

РЕДАКТИРОВАТЬ: это веб-компонент, экспортированный из Angular с использованием Angular Elements и не традиционный Angular

Я экспериментирую с Angular Elements и создал компонент NgFor, который загружает файл JSONниже. 

[ 
{  
    "id":1,
    "name": "star 1",
    "image":"https://picsum.photos/id/1059/400/400",
    "text":"Text about star 1"
},
{  
    "id":2,
    "name": "star 2",
    "image":"https://picsum.photos/id/1060/400/400",
    "text":"Text about star 2"
},
{  
    "id":3,
    "name": "star 3",
    "image":"https://picsum.photos/id/1061/400/400",
    "text":"Text about star 3"
},
{  
    "id":4,
    "name": "star 4",
    "image":"https://picsum.photos/id/1062/400/400",
    "text":"Text about star 4"
},
{  
    "id":5,
    "name": "star 5",
    "image":"https://picsum.photos/id/1063/400/400",
    "text":"Text about star 5"
},
{  
    "id":6,
    "name": "star 6",
    "image":"https://picsum.photos/id/1064/400/400",
    "text":"Text about star 6"
},
{  
    "id":7,
    "name": "star 7",
    "image":"https://picsum.photos/id/1065/400/400",
    "text":"Text about star 7"
},
{  
    "id":8,
    "name": "star 8",
    "image":"https://picsum.photos/id/1066/400/400",
    "text":"Text about star 8"
},
{  
    "id":9,
    "name": "star 9",
    "image":"https://picsum.photos/id/1067/400/400",
    "text":"Text about star 9"
},
{  
    "id":10,
    "name": "star 10",
    "image":"https://picsum.photos/id/1068/400/400",
    "text":"Text about star 10"
}
]

Это отображает список в браузере 

Star1
Star2
Star3
.
.
etc

На этих элементах есть функция onClick, которая генерирует объект через свойство @Output.

У меня в теге script в HTML-файле есть eventListener, который прослушивает этот emit и обновляет свойство src в теге img соответствующим изображением.

У меня вопрос;Я хотел бы создать еще один WebComponent, в который встроен этот EventListener, так что я могу просто добавить этот второй компонент в HTML, и тогда они будут общаться друг с другом, без необходимости писать EventListener непосредственно в теге script. Мой текущий код. 

<name-list />
<img-comp />
<img></img>  //not needed if <img-comp> can receive the emitted data
<script src="elementCommunicationWithDom.js"></script>
<script>
    init();
    function loadJSON(callback) {

        var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
        xobj.open('GET', 'data.json', true);
        xobj.onreadystatechange = function () {
            if (xobj.readyState == 4 && xobj.status == "200") {
                callback(xobj.responseText);
            }
        };
        xobj.send(null);
    }

    function init() {
        loadJSON(function (response) {
            var obj = JSON.parse(response);
            console.log(obj);
            let element = document.querySelector('name-list');
            element.names = obj; //set the html property names created in @input in Angular to the object
        });
    }

    let element = document.querySelector('name-list');
    let img = document.querySelector('img');
    // I want to do the below directly within the <img-comp> component
    element.addEventListener("onSelectItem", (event) => { //gets the output of @Output which is onSelectItem
        img.src = event.detail.image;
        console.log(event.detail.image)
    })

</script>

Назад в мой угловой компонент для <img-comp> У меня есть следующий

Шаблон 

<img [src]="imgsrc" />

Компонент 

 @Component({
  selector: 'app-img-comp',
  templateUrl: './img-comp.component.html',
  styleUrls: ['./img-comp.component.css']
})
export class ImgCompComponent implements OnInit {

  @Input() imgsrc: string;


  //This below is incorrect and is what I need I think to make this work
 @HostListener('onSelectItem', ['$event'])
  OnStarClicked(event) {
  this.imgsrc = event.detail.image;
  console.log(event.detail.image);
 }

Как получить свойство @Hostlistener для правильного добавления эквивалентного eventListener, который находится в теге html-скрипта?

https://stackblitz.com/edit/angular-ej7fnv

1 Ответ

0 голосов
/ 04 ноября 2019

Я не уверен, как выглядит структура ваших comonnets, но вы должны иметь в виду:

EventEmitters! == DOM events

В отличие от DOMСобытия угловых пользовательских событий не всплывают. Это означает, что вы можете прослушивать событие компонента только на родительском уровне.

Что вы можете сделать, так это создать собственные события DOM следующим образом: 

constructor(private el: ElementRef) { }

onClick(star) {
  this.el.nativeElement
    .dispatchEvent(new CustomEvent('onSelectItem', {
      detail: star,
      bubbles: true
    }));
}

Надеюсь, это полезно.

...