Angular 4中通过jQuery设置Materialize CSS标签Active类无效求助

看起来你遇到的问题核心是DOM渲染时机和Angular生命周期钩子没配合好，咱们一步步来解决：

问题根源 #

你在ngOnInit里嵌套了$(document).ready()，这其实是画蛇添足的操作：

• Angular的ngOnInit钩子触发时，组件的模板DOM可能还没完全挂载到页面上，这时候jQuery选择器可能找不到目标.tabs元素，或者Materialize的初始化逻辑无法正确绑定DOM事件。
• $(document).ready()是等待整个页面DOM加载完成，而Angular组件的渲染是在页面加载后进行的，两者的时机完全不同，嵌套起来反而会导致初始化延迟，直到手动点击触发了Materialize的事件后才会显示选中状态。

正确解决方案 #

方案1：改用AfterViewInit钩子（推荐）

AfterViewInit是Angular专门用于组件视图完全渲染完成后的钩子，这时候DOM已经准备就绪，非常适合初始化第三方UI库：

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

@Component({
  // 这里是你的组件元数据，比如selector、template等
})
export class YourComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 先初始化Materialize tabs
    $('.tabs').tabs();
    // 再选中指定标签
    $('.tabs').tabs('select', 'test1');
  }
}

方案2：用ViewChild精准获取DOM元素（更严谨）

如果想更精准地控制目标元素，避免全局选择器的潜在问题，可以用Angular的ViewChild获取组件内的tabs元素：

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

@Component({
  template: `
    <!-- 给tabs元素添加模板引用变量 #tabsContainer -->
    <div #tabsContainer class="tabs">
      <ul>
        <li class="tab"><a href="#test1">Test 1</a></li>
        <li class="tab"><a href="#test2">Test 2</a></li>
      </ul>
    </div>
  `
})
export class YourComponent implements OnInit {
  // 获取模板中的tabs元素
  @ViewChild('tabsContainer') tabsContainer: ElementRef;

  ngOnInit(): void {
    // 确保元素存在后再初始化
    if (this.tabsContainer?.nativeElement) {
      $(this.tabsContainer.nativeElement).tabs();
      $(this.tabsContainer.nativeElement).tabs('select', 'test1');
    }
  }
}

额外检查项 #

别忘了确认你的Angular项目已经正确引入了Materialize CSS和jQuery：

• 在angular.json的scripts数组中添加jQuery和Materialize的JS文件路径
• 在styles数组中添加Materialize的CSS文件路径

这样操作后，页面加载时就能自动选中指定的标签，不需要手动点击触发啦！

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