Angular 4中Semantic UI标签页仅刷新后可用问题咨询

这个问题的核心在于Angular路由的动态DOM加载特性和jQuery/Semantic UI初始化时机的冲突：

1. 你在index.html里的$(document).ready()只会在页面首次加载完成时执行一次。当通过Angular路由跳转到目标组件时，组件的DOM是动态插入到现有页面中的，这时候document.ready事件早就触发过了，所以那段tab初始化代码根本不会重新运行。
2. 你尝试在ngOnInit/ngAfterViewInit里初始化没生效，大概率是两个原因：要么是你还是用了全局选择器（比如$('.tabular.menu .item')），可能和页面其他元素冲突；要么是你没有精准定位到当前组件内的DOM元素，导致初始化没有作用到目标元素上。
3. 另外，你的模板里所有tab的segment都加了active类，这会导致默认所有内容都显示，也会干扰Semantic UI tab的正常切换逻辑。

第一步：修正模板的tab内容区域 #

先把多余的active类去掉，只保留默认显示的那个segment的active：

<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" data-tab="gen_config">
  //some stuff//
</div>
<div class="ui bottom attached tab segment" data-tab="service">
  //some stuff//
</div>
<div class="ui bottom attached tab segment" data-tab="change">
  //some stuff//
</div>

第二步：在组件内部精准初始化tab #

推荐用ElementRef或者ViewChild定位到当前组件内的tab元素，在ngAfterViewInit里执行初始化：

方法1：用ElementRef获取组件根元素

import { Component, AfterViewInit, ElementRef } from '@angular/core';
declare var $: any; // 如果jQuery是全局引入的，需要声明这个变量

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent implements AfterViewInit {

  constructor(private elRef: ElementRef) { }

  ngAfterViewInit(): void {
    // 只初始化当前组件内的tab菜单，避免影响页面其他元素
    $(this.elRef.nativeElement).find('.tabular.menu .item').tab();
  }
}

方法2：用ViewChild精准定位菜单元素

先给模板里的菜单加个模板引用：

<div #tabMenu 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>

然后在组件里初始化：

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent implements AfterViewInit {
  @ViewChild('tabMenu') tabMenu!: ElementRef;

  ngAfterViewInit(): void {
    $(this.tabMenu.nativeElement).find('.item').tab();
  }
}

为什么刷新后能正常工作？ #

因为刷新页面时，整个页面的DOM会重新加载，组件的DOM在document.ready触发前就已经存在于页面中了，所以那段初始化代码能正确找到元素并绑定tab事件。而路由切换时是动态添加DOM，错过了ready的触发时机。

内容的提问来源于stack exchange，提问作者Karan