Angular 是一種流行的前端框架，它使得開發者可以更加容易地構建單頁應用。而 jQuery 是一種更加基礎的 JavaScript 庫，可以用于 DOM 操作，事件處理等。但是 Angular 和 jQuery 并不是互相排斥的，事實上，它們可以結合使用來更好地構建前端應用。
在使用 Angular 和 jQuery 結合的過程中，最常見的場景就是需要使用 jQuery 插件或是直接操作 DOM 元素。由于 Angular 的雙向數據綁定機制，DOM 的狀態會隨著數據的變化而自動更新，但有時我們仍然需要直接操作 DOM 元素。在這種情況下，jQuery 就顯得很有用了。
舉個例子，假設我們需要實現一個自定義的下拉選擇框，我們可以使用 jQuery UI 提供的 selectmenu 插件。我們需要在模塊的代碼中引入 jQuery 和 jQuery UI，并在代碼中使用 selectmenu 插件：
import $ from 'jquery';
import 'jquery-ui/ui/widgets/selectmenu';
@Component({
selector: 'app-custom-select',
template: ``
})
export class CustomSelectComponent implements AfterViewInit {
ngAfterViewInit() {
$('.custom-select').selectmenu();
}
}在這個例子中，我們在 Angular 的組件中直接引入 jQuery 和 selectmenu 插件，并在組件的生命周期 hook 中初始化插件。這樣我們就可以使用 jQuery UI 提供的下拉框功能了。
然而，使用 jQuery 需要格外小心。由于其直接操作 DOM 的能力，我們需要避免與 Angular 的數據綁定機制產生沖突。具體來說，我們需要確保從 jQuery 的事件處理函數中觸發 Angular 的變化檢測機制，否則數據的變化可能無法被自動更新到視圖中。為此，我們可以使用 Angular 的 ChangeDetectorRef 來強制觸發變化檢測：
@Component({
selector: 'app-custom-input',
template: ``
})
export class CustomInputComponent {
constructor(private cdr: ChangeDetectorRef) {}
onInput(value) {
// 使用 jQuery 提供的函數來操作 DOM
$('.custom-input').css('background-color', 'grey');
// 手動觸發變化檢測
this.cdr.detectChanges();
}
}在這個例子中，我們通過 input 事件處理函數來操作輸入框的 DOM，同時使用 ChangeDetectorRef 來手動觸發變化檢測。這樣 Angular 就能夠正確地將變化更新到視圖中了。