高聚物2存取档案上载于另一页

Question

我正在使用一个简单的聚合物应用程序，只有几页在铁页。我正在上传一个文件在一个页面，然后我想访问这个上传的文件在另一个页面。

我尝试了几种方法，但似乎没有什么效果，下面是示例代码

上传文件的页面

<dom-module id="file-upload-page">
    <template>
        <form method="post" enctype="multipart/form-data" action="/someation" disable-native-validation-ui no-validate>
            <my-input file={{file}} id="sampleFileInput" btn-style="primary" max-files="1" accept=".xls, .xlsx" on-drop="fileUploadChangeListener"
                label="[[localize('open_invoices_file')]]" help-text="[[localize('open_invoices_file_help')]]" no-auto required>
            </my-input>
        </form>
    </template>
    <script>
        class FileUploadPge extends Polymer.mixinBehaviors([], Polymer.Element) {
            static get is() {
                return 'file-upload-page';
            }

            static get properties() {
                return {
                }
            }
         }

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

访问文件的页

<dom-module id="consumer-page">
    <template>
        //some code
    </template>

    <script>
        class ConsumerPage extends Polymer.mixinBehaviors([], Polymer.Element) {

            static get is() {
                return 'consumer-page';
            }

            constructor() {
                super();
            }

            static get properties() {
                return {
                    //some properties
                }
            }

            ready() {
                super.ready();
                var temp2 = this.$.sampleFileInput;   // returns null
                var temp3 = this.shadowRoot.querySelector("#sampleFileInput"); // returns null
                var temp4 = this.root.querySelector('#sampleFileInput'); // returns null
                var temp5 = this.$$('#sampleFileInput'); // returns null
                this._refreshSelections();

            };

            _proceed() {

                var test1 = Polymer.dom(this).querySelector("#sampleFileInput"); // returns null
                var test2 = this.$.sampleFileInput; //returns null
                var test3 = document.getElementById("sampleFileInput"); //returns null
                var test4 = this.$$("sampleFileInput"); //returns null
                var test5 = this.shadowRoot; //returns some object


                var test6 = this.$$.sampleFileInput; //returns null
                var test7 = document.querySelector('sampleFileInput'); //returns null
                var test8 = document.querySelector('file-upload-page::shadow .FileUploadPge'); //returns null
                var temp4 = this.root.querySelector('#sampleFileInput');//returns null
                var temp5 = this.$$('#sampleFileInput');//returns null
                var temp6 = this.shadowRoot.querySelector('#sampleFileInput'); // returns null
            };
        }

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

同样的代码在聚合酶1.0中起作用

document.getElementById("sampleFileInput")

有人能帮助我在访问其他页面中的文件时做错了什么吗，以及如何在Polymer2.0中处理这个场景？

Answer 1

正如您在consumer-page中所说的，您正在尝试访问#sampleFileInput元素，它是另一个组件的子元素。

所有这些尝试：

var temp2 = this.$.sampleFileInput;
var temp3 = this.shadowRoot.querySelector("#sampleFileInput"); 
var temp4 = this.root.querySelector('#sampleFileInput');
var temp5 = this.$$('#sampleFileInput');
var test1 = Polymer.dom(this).querySelector("#sampleFileInput");

失败是因为您试图访问consumer-page模板中不存在的元素，而这些元素是：

var test7 = document.querySelector('sampleFileInput');
var test8 = document.querySelector('file-upload-page::shadow .FileUploadPage');

失败分别是因为document.querySelector()不能在阴影区域中选择，::shadow和/deep/选择器被废弃(请看这里)。

从技术上讲，您应该能够以这样的方式在consumer-page中选择consumer-page：

this.parentElement // Goes back to iron-pages
    .querySelector('file-upload-page') // Selects file-upload-page
    .shadowRoot // Enters its shadow root
    .querySelector('#sampleFileInput'); // Selects the file uploader

但是，访问其他人的影子根中的元素被认为是一个不太好的做法，更不用说，如果您对iron-pages页面使用延迟加载，如果file-upload-page没有加载，这将失败。

相反，还有许多其他方法可以在自定义元素(如事件或属性)之外公开信息。

如果它适合您的实现，您可以使用包含iron-pages的组件作为过程的协调器，并使用属性绑定通知它在用户继续填充不同页面时需要的数据。

在file-upload-page中，IE将上传的文件url绑定到属性，并在父属性中观察它：

<iron-pages>
    <file-upload-page url="{{url}}"></file-upload-page>
    <consumer-page></consumer-page>
</iron-pages>

<script>
    class Parent extends PolymerElement {

        // ...

        static get properties() {
            return {
                url: {
                    type: String,
                    reflectToAttribute: true,
                    observer: '_urlChanged',
                },
            };
        }

        _urlChanged() {
            console.log(this.url);
        }

        // ...
    }
</script>