Angular 4 Semantic UI Tabs 仅在刷新后工作答案

【问题标题】：Angular 4 Semantic UI Tabs only work after refreshAngular 4 Semantic UI Tabs 仅在刷新后工作
【发布时间】：2018-05-24 19:13:00
【问题描述】：

我在组件的 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>

我在一个自定义 JS 文件中实例化了标签，该文件正在通过 index.html 页面加载并包含以下内容：

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

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

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

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

提前感谢您！

【问题讨论】：

标签： javascript angular angular5 semantic-ui

【解决方案1】：

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

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

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

您看到的行为是因为您最初将应用打开到其默认页面，调用了 $(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 是一个 lifecycle hook，每次实例化组件时都会调用它。

【讨论】：