Вкладки Angular 4 Semantic UI работают только после обновления - PullRequest
Новая
       8

Вкладки Angular 4 Semantic UI работают только после обновления

0 голосов
/ 24 мая 2018

У меня есть несколько семантических вкладок пользовательского интерфейса, настроенных в template.html моего компонента, например: 

<div class="ui top attached tabular menu">
    <a class="item active" data-tab="global" >Global</a>
    <a class="item" data-tab="gen_config" >Config</a>
    <a class="item" data-tab="service" >Service</a>
    <a class="item" data-tab="change" >Change</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="global"> //some stuff// </div>
<div class="ui bottom attached tab segment active" data-tab="gen_config"> //some stuff// </div>
<div class="ui bottom attached tab segment active" data-tab="service"> //some stuff// </div>
<div class="ui bottom attached tab segment active" data-tab="change"> //some stuff// </div>

Я создал вкладки в пользовательском файле JS, который загружается через страницу index.html и содержитэто: 

$(document).ready(function () {
    $('.ui.dropdown').dropdown();
    $('.top.menu .item').tab();
    $('.tabular.menu .item').tab();
});

Всякий раз, когда я направляю к компоненту, который содержит эти вкладки, вкладки не работают.Тем не менее, всякий раз, когда я обновляю страницу на этом компоненте, вкладки начинают работать .Есть ли причина, почему это происходит?

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

Я пытался реализовать setTimeout в моих компонентах onInit, а также загрузить вкладки в методах ngAfterViewInit и ngOnInit, но безрезультатно.

Заранее спасибо!

1 Ответ

0 голосов
/ 24 мая 2018

$ (document) .ready () запускается только один раз, когда ваша веб-страница открыта / обновлена.Цитирование официальной документации:

Код, включенный в $ (document) .ready (), будет запущен только после того, как страница объектной модели документа (DOM) будет готова для выполнения кода JavaScript.

Угловые приложения Одностраничные приложения .Это означает, что когда вы используете Angular Router для изменения компонентов в приложении, страница не обновляется, динамически изменяется только содержимое.

Поведение, которое вы видите, заключается в том, что вы изначально открываете свое приложение для него.На странице по умолчанию вызывается функция $(document).ready(), но в данный момент ваши семантические элементы не находятся в DOM.Функция ready() выполняется, не может найти ваши элементы и, следовательно, не инициализирует их с настройками.При маршрутизации к вашему компоненту $(document).ready() больше не вызывается, поскольку страница не обновляется.Изменяется только содержимое директивы <router-outlet>.Таким образом, по сути, ваши семантические элементы добавляются в DOM, НО, поскольку $(document).ready() НЕ будет выполняться, они не будут инициализированы с требуемым поведением.Однако когда вы обновляете страницу в маршрутизируемом компоненте, $(document).ready() IS вызывается, и на этот раз элементы ARE в DOM (потому что, когда Angular инициализирует, он определяет, какой компонент вына основе URL), поэтому код инициализации нацелен на них должным образом, и вы видите поведение, которое ожидается.

Чтобы обойти эту проблему, я бы рекомендовал переместить код инициализации в функцию ngOnInit. 

export class RoutedComponent implements OnInit {
    ngOnInit() {
        $('.ui.dropdown').dropdown();
        $('.top.menu .item').tab();
        $('.tabular.menu .item').tab();
    }
}

Таким образом, при каждом маршруте к вашему компоненту будет выполняться ваш код инициализации.ngOnInit - это ловушка жизненного цикла , которая будет вызываться каждый раз, когда создается экземпляр вашего компонента.

...