时间戳

首页 > 解决方案 > Angular 4 Semantic UI Tabs 仅在刷新后工作

javascript - Angular 4 Semantic UI Tabs 仅在刷新后工作

问题描述

我在组件的 template.html 中设置了一些语义 UI 选项卡，如下所示：

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

我在通过 index.html 页面加载的自定义 JS 文件中实例化了选项卡，其中包含以下内容：

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

每当我路由到包含这些选项卡的组件时，这些选项卡都不起作用。但是，每当我在该组件上刷新页面时，选项卡就会开始工作。发生这种情况有原因吗？

我最关心的是为什么选项卡在路由到组件后不起作用，而只有在路由后刷新页面后才起作用。

我尝试在我的组件 onInit 方法中实现 setTimeout，并在 ngAfterViewInit 和 ngOnInit 方法中加载选项卡，但无济于事。

先感谢您！

标签： javascriptangularangular5semantic-ui

解决方案

$( document ).ready()仅在您的网页打开/刷新时运行一次。引用官方文档：

包含在 $( document ).ready() 中的代码只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。

Angular 应用程序是单页应用程序。这意味着当您使用 Angular 路由器更改应用程序中的组件时，页面不会刷新，只会动态更改内容。

您看到的行为是因为您最初将应用程序打开到其默认页面，$(document).ready()调用了该函数，但此时您的语义元素不在 DOM 中。该ready()函数执行，未能找到您的元素，因此不使用设置初始化它们。当您路由到您的组件时，$(document).ready()不会再次调用，因为页面没有刷新。仅<router-outlet>更改指令内的内容。所以本质上，你的语义元素被添加到 DOM 但因为$(document).ready()不会执行，它们没有使用所需的行为进行初始化。但是，当您在路由组件上刷新页面时，会调用$(document).ready() IS，这次元素是在 DOM 中（因为当 Angular 初始化时，它会根据 URL 确定您所在的组件），这就是为什么初始化代码正确地定位它们并且您会看到预期的行为。

为了规避这个问题，我建议将你的初始化代码移到ngOnInit函数中。

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

这样，每当你路由到你的组件时，你的初始化代码就会被执行。ngOnInit是一个生命周期钩子，每次实例化组件时都会调用它。

推荐阅读