Ionic Modals용 웹 구성 요소 추가

따라서 이 웹 구성 요소에 대해 Stencil, Polymer 또는 Angular를 사용하지 않고 처음부터 Custom Element을 코딩할 것입니다. 이것은 Algolia 검색 searchResults를 허용하는 간단한 검색 모달을 빌드합니다.

모달 코드

Eric Bidelman이 작성한 것Custom Elements보다 더 많은 것을 추가할 수 있는지 모르겠습니다. 기본적으로 무엇이든 넣을 수 있다고 말하고 싶습니다. 반복할 때마다 코드를 실행해야 하는 경우 connectedCallback()가 있는지 확인하십시오.

connectedCallback: Called every time the element is inserted into the DOM. Useful for running setup code, such as fetching resources or rendering. Generally, you should try to delay work until this time.

customElements.define('modal-search', class extends HTMLElement {
    constructor() {
        super(); this.attachShadow({ mode: 'open' });
    }
    connectedCallback() {
        const ionHeader = document.createElement('ion-header');
        const ionToolbar = document.createElement('ion-toolbar');
        const ionTitle = document.createElement('ion-title');
        ionTitle.innerHTML = <ion-label color='primary'>Search Purr-fectly</ion-label>
        const ionButtons = document.createElement('ion-buttons');
        ionButtons.setAttribute('slot', 'primary');
        const ionButton = document.createElement('ion-button');
        ionButton.addEventListener('click', async () => {
            const modalController = document.querySelector('ion-modal-controller'); await modalController.dismiss({ 'dismissed': true });
        })
        const ionIconClose = document.createElement('ion-icon'); ionIconClose.setAttribute('slot', 'icon-only');
        ionIconClose.setAttribute('name', 'close'); ionButton.appendChild(ionIconClose);
        ionButtons.appendChild(ionButton); ionToolbar.appendChild(ionButtons);
        ionToolbar.appendChild(ionTitle); ionHeader.appendChild(ionToolbar);
        const ionSearchbar = document.createElement('ion-searchbar');
        const searchContent = document.createElement('ion-content');
        ionSearchbar.addEventListener('ionChange', async ev => {
            try { const searchResults = await index.search({ query: ev.detail.value });
                const ionList = document.createElement('ion-list'); searchResults.hits.forEach(hit => {
                const ionItem = document.createElement('ion-item'); ionItem.setAttribute('href', hit.url);
                const ionLabel = document.createElement('ion-label');
                const title = document.createElement('h2'); title.innerHTML = hit._highlightResult.title.value; ionLabel.appendChild(title);
                const summary = document.createElement('p'); summary.innerHTML = hit._highlightResult.summary.value; ionLabel.appendChild(summary);
                ionItem.appendChild(ionLabel); ionList.appendChild(ionItem); }); searchContent.innerHTML = ionList.innerHTML
            }
            catch (err) {
                console.log(err); console.log(err.debugData);
            }
        });
        this.shadowRoot.appendChild(ionHeader);
        this.shadowRoot.appendChild(ionSearchbar);
        this.shadowRoot.appendChild(searchContent);
    }
});

클릭 이벤트 리스너

이것은 Ionic's Modal 을 활용하고 있습니다. 또한 귀하의 사이트에 <ion-modal-controller>를 포함해야 합니다. 그렇지 않으면 작동하지 않습니다. modalController.create에서 component: 'modal-search' 속성을 전달하고 있음을 알 수 있습니다. 위에서 생성한 커스텀 요소의 이름입니다.

mainSearch.forEach(b => {
    b.addEventListener('click', async (event) => {
        // initialize controller
        const modalController = document.querySelector('ion-modal-controller');
        await modalController.componentOnReady();
        // present the modal const modalElement =
        await modalController.create({
            animated: true,
            component: 'modal-search',
            componentProps: {
                search: event.currentTarget.getAttribute('search')
            } });
        await modalElement.present();
    });
});

가장 좋은 부분

이제 이것을 패키징하고 멋진 패키지로 NPM에 추가할 수 있습니다. 더 좋은 점은 다음에 Stencil 구성 요소에서 만들 수 있다는 것입니다. 어떻게 생각하는지 알려주세요!