import { Component, AfterViewInit } from '@angular/core';
declare var $: any; // 声明jQuery变量

@Component({
  selector: 'app-example',
  template: '<div id="example">Example Content</div>'
})
export class ExampleComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    $(document).ready(() => {
      console.log('jQuery document ready inside Angular');
      $('#example').css('color', 'red');
    });
  }
}

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

@Component({
  selector: 'app-example',
  template: '<div id="example">Example Content</div>'
})
export class ExampleComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    console.log('Angular view initialized');
    $('#example').css('color', 'blue');
  }
}

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

@Component({
  selector: 'app-example',
  template: '<div #exampleDiv>Example Content</div>'
})
export class ExampleComponent implements AfterViewInit {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngAfterViewInit(): void {
    const div = this.el.nativeElement.querySelector('div');
    this.renderer.setStyle(div, 'color', 'green');
  }
}