角4语义用户界面只有在刷新后才能工作。

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文件中的选项卡，该文件正在通过index.html页面加载，并包含以下内容：

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

每当我路由到包含这些选项卡的组件时，选项卡就无法工作。但是，每当我刷新页面时，在该组件上，选项卡就会开始工作。为什么会发生这种事？

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

我尝试在组件setTimeout方法中实现onInit，以及加载ngAfterViewInit和ngOnInit方法中的选项卡，但都没有效果。

提前谢谢你！

Answer 1

当您的网页打开/刷新时，$(文档).ready()只运行一次。引用正式文件：

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

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

您所看到的行为是因为您最初将应用程序打开到它的默认页面，调用了$(document).ready()函数，但此时，您的语义元素不在DOM中。ready()函数执行，找不到您的元素，因此不使用设置初始化它们。当您路由到组件时，不会再次调用$(document).ready()，因为页面没有刷新。只更改<router-outlet>指令中的内容。因此，在本质上，您的语义元素是添加到DOM中的，但是由于$(document).ready()不会执行，所以它们不会使用所需的行为进行初始化。但是，当您在路由组件上刷新页面时，调用$(document).ready() ，这一次元素是DOM中的(因为当角初始化时，它根据URL确定您所依赖的组件)，这就是初始化代码正确地针对它们的原因，您可以看到预期的行为。

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

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

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