Файл доступа Polymer 2 загружен на другую страницу - PullRequest
0 голосов
/ 04 июня 2018

Я использую простое полимерное приложение с несколькими страницами на железных страницах.Я загружаю файл на одной странице, а затем хочу получить доступ к этому загруженному файлу на другой странице.

Я пробовал несколько вещей, но ничего не помогло, вот пример кода

Страница, на которую загружен файл

<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>

Этот же код работает в Polymer1.0 с этим

document.getElementById("sampleFileInput")

Может кто-нибудь помочь, что я не так делаю при доступе к этому файлу на другой странице, и как мне справиться с этим сценарием в Polymer 2.0?

1 Ответ

0 голосов
/ 04 июня 2018

Как вы сказали в 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");

failпотому что вы пытаетесь получить доступ к элементу, которого нет внутри шаблона consumer-page, в то время как эти:

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

терпят неудачу соответственно, потому что document.querySelector() не может выбрать внутри shadow dom и ::shadow и /deep/ селекторы устарели ( см. Здесь ).

Технически вы должны иметь возможность выбрать #sampleFileInput внутри 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, в качестве координатора вашей процедуры и использоватьатрПривязывает привязки, чтобы уведомить его с данными, которые ему нужны на разных страницах, когда пользователь продолжает заполнять.

IE в file-upload-page привязывает 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>
...