Angular 4语义UI选项卡仅在刷新后可用

Question

我在组件的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文件中的选项卡，该文件通过索引加载。html页，并包含以下内容：

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

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

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

我尝试在我的组件onInit方法中实现setTimeout，并在ngAfterViewInit和ngOnInit方法中加载选项卡，但没有成功。

提前谢谢你！

Answer 1

$（文档）。ready（）仅在打开/刷新网页时运行一次。引用官方文件：

只有当页面文档对象模型（DOM）准备好让JavaScript代码执行时，$（文档）中包含的代码才会运行。

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

您所看到的行为是因为您最初将应用程序打开到其默认页面，调用了$（文档）. Ready（）函数，但在此时，您的语义元素不在DOM中。就绪（）函数执行，找不到您的元素，因此没有使用设置初始化它们。当您路由到您的组件时，不会再次调用$（文档）.就绪（），因为页面没有刷新。只有内的内容

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

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

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