从另一个组件打开纸质对话框

Question

我正在使用聚合物2和纸张对话框组件。

我有另一个自定义Web组件，当单击一个按钮时，它需要显示另一个组件中的纸张对话框。

从以下测试组件中，您可以看到：

点击事件调用：

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

然后调用：

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

我得到的错误是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。只有在将组件附加到dom时才会初始化$。*。

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