角4语义用户界面只有在我点击它们之后才能工作。

Question

我的app.component.html中设置了一些语义UI选项卡，如下所示：

<div class = "ui container">
  <h1>Header/h1>
  <hr>

  <div style = "background-color: rgb(194, 221, 240);" class="ui top attached tabular menu">
    <a style = "font-size: large;" class="item active" data-tab="dtQuestions">Questions</a>
    <a style = "font-size: large;" class="item" data-tab="dtAddNewQuestion">Add new question</a>
    <a style = "font-size: large;" class="right item" data-tab="dtUserProfile">User profile</a>
  </div>

  <div class="ui bottom attached tab segment active" data-tab="dtQuestions">
    <app-question-list [questions]="questions"></app-question-list>
  </div>

  <div class="ui bottom attached tab segment" data-tab="dtAddNewQuestion">
    <app-create-question (questionCreated)="onQuestionCreated($event)"></app-create-question>
  </div>

  <div class="ui bottom attached tab segment" data-tab="dtUserProfile">
    <app-user-profile></app-user-profile>
  </div>
</div>

这些选项卡似乎没有显示我第一次打开页面的时间，并且是空的，但是当我单击特定的选项卡时，内容似乎开始一个接一个地显示，就好像它需要时间加载一样，但只有在我单击该特定选项卡之后，如果没有显示任何内容，我希望看到初始化时的内容(当我打开设置为活动的选项卡上的页面时)

我实例化了app.component.ts中的选项卡，如下所示

export class AppComponent implements OnInit{
 ngOnInit(): void {
    $('.menu .item').tab();
  }

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

上面写的，我似乎想不出怎么解决这个问题

Answer 1

我以前从未使用过语义UI，但您能否尝试从“用户配置文件”中的类中删除"right“，如下所示

<a style = "font-size: large;" class="item" data-tab="dtUserProfile">User profile</a>

此外，查看文档，我发现active选项卡的类应该如下所示

<div class="ui bottom attached active tab segment" data-tab="dtQuestions">
    <app-question-list [questions]="questions"></app-question-list>
</div>  

希望以上两种选择中的任何一种都有帮助。