открыть бумажный диалог из другого компонента

Question

Я использую полимер 2 и компонент диалога бумаги.

У меня есть другой пользовательский веб-компонент, который при нажатии кнопки должен отображать диалоговое окно бумаги, которое находится в другом компоненте.

Из приведенных ниже тестовых компонентов вы можете видеть, что:

Событие щелчка вызывает:

showDialog()
{
    var testDialog = new TestDialog();
    testDialog.open();
}

Которое затем вызывает:

open()
{
    this.$.dialog.open();
}

Ошибка Iget это то, что this.$ не определено.

Теперь это имеет некоторый смысл, так как я предполагаю, что $ не заполняется, пока не будет отображен шаблон.

Так что я думаю, вопрос в том, как сделатьЯ получаю шаблон диалога для рендеринга, чтобы затем открыть его?

Компонент вызова:

    <link href="../../../bower_components/polymer/polymer.html" rel="import">
<link rel="import" href="test-dialog.html">

<dom-module id="time-display-test">
    <template>
        <style include="shared-styles">

        </style>

<button id="time" >Show</button>
</template>

    <script>
        class TimeDisplay extends Polymer.Element {
            static get is() {
                return 'time-display-test';
            }

            static get properties() {
             return {
                };
            }


            connectedCallback()
            {
                super.connectedCallback();

                this.$.time.onclick = ()=>{ this.showDialog(); };
            }

            showDialog()
            {
                var testDialog = new TestDialog();
                testDialog.open();
            }

        }
        customElements.define(TimeDisplay.is, TimeDisplay);
    </script>
</dom-module>

Компонент диалогового окна на бумаге:

    <link rel="import"     href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">

<dom-module id="test-dialog">
    <template>
        <style include="shared-styles">
        </style>
        <!-- backdrop autoCloseDisable -->
        <paper-dialog id="dialog">
            <paper-dialog-scrollable>
                    Hello World
            </paper-dialog-scrollable>
        </paper-dialog>
    </template>

    <script>
        class TestDialog extends Polymer.Element {

            static get is() {
                return 'test-dialog';
            }

            static get properties() {
                return {

                };
            }

            open()
            {
                this.$.dialog.open();
            }


        }
        customElements.define(TestDialog.is, TestDialog);


    </script>
    </dom-module>

Answer 1

Вы должны сначала добавить новый компонент в dom, чтобы получить доступ к dom. this. $. * будет инициализирован только тогда, когда компонент был добавлен в dom.

showDialog()
{
    var testDialog = new TestDialog();
    this.appendChild(testDialog);
    testDialog.open();
}