Angular 4中Semantic UI Tabs初始化无内容，点击后才显示的问题

核心原因 #

Angular的ngOnInit钩子执行时，组件的视图DOM还未完全渲染完成，此时调用Semantic UI的tab()初始化方法，无法正确识别并激活默认标签对应的内容段。

解决方案 #

1. 切换到ngAfterViewInit钩子初始化标签页 #

将标签页的初始化代码从ngOnInit移到ngAfterViewInit，这个钩子会在视图DOM完全渲染后执行：

import { Component, OnInit, AfterViewInit } from '@angular/core';

export class AppComponent implements OnInit, AfterViewInit{
  ngOnInit(): void {
    // 保留其他初始化逻辑，标签页初始化移至下方
  }

  ngAfterViewInit(): void {
    $('.menu .item').tab();
    // 手动触发默认标签激活，确保内容显示
    $('.menu .item.active').tab('show');
  }

  public onQuestionCreated(question: Question): void {
    this.questions.push(question);
  }
}

2. 核对模板中active类的正确性 #

确认默认激活的标签和对应内容段都已添加active类（你的代码已正确设置，可再次核对）：

• 标签项：<a class="item active" data-tab="dtQuestions">Questions</a>
• 内容段：<div class="ui bottom attached tab segment active" data-tab="dtQuestions">

3. 避免全局选择器冲突（可选） #

如果仍有问题，使用ViewChild获取组件内的菜单元素，避免全局选择器带来的冲突：

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class AppComponent implements OnInit, AfterViewInit{
  @ViewChild('tabMenu') menuElement!: ElementRef;

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

  public onQuestionCreated(question: Question): void {
    this.questions.push(question);
  }
}

同时修改HTML模板，给菜单容器添加模板引用变量：

<div #tabMenu style="background-color: rgb(194, 221, 240);" class="ui top attached tabular menu">
  <!-- 标签项内容不变 -->
</div>

原理说明 #

Semantic UI标签页组件需要在DOM元素完全加载后初始化，Angular的ngAfterViewInit是视图渲染完成后的第一个钩子，此时执行JQuery初始化方法才能正确绑定标签与内容的关联，确保默认激活的标签内容立即显示。

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