為什么Angular在開發chrome擴展彈窗時檢測不到變化？

Question

我正在開發一個簡單的書簽 chrome 擴展並使用 Angular 作為框架，可能不是此類任務的最佳選擇，但我想嘗試一下。

在本文之后，這一切似乎都是合乎邏輯的。 但是，我開始遇到非常奇怪的問題。

當我單擊書簽圖標時，書簽視圖輸入未填充來自 chrome API 的值（似乎 Angular 不會啟動更改檢測或類似的東西，我是前端新手，一般來說是 ZC31C335EF37283C451B18DE）。 為了更改視圖，我需要單擊其中一個輸入，然后在視圖更改后單擊另一個輸入。

另一個觀察結果是，當我使用<select>輸入時，我 select 一個選項輸入不會更改我需要單擊其中一個文本輸入才能看到更改。 我相信必須填寫輸入，因為代碼chrome.tabs.query在組件的構造函數中執行。 我懷疑此代碼在 Angular 之外運行，因此 angular 不會觸發更改檢測，因此我嘗試了ChangeDetectorRef.detectChanges()並且當我單擊書簽圖標時它可以更新輸入，但這並沒有解決問題<select>所以問題可能更深。

這是組件代碼：

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

@Component({
    selector: 'app-add-bookmark',
    templateUrl: './add-bookmark.component.html',
    styleUrls: ['./add-bookmark.component.css']
})
export class AddBookmarkComponent implements OnInit {


    url: string = "";
    directory: string = "";
    description: string = "";
    tags: string[] = [];
    image: string;
    recentFolders = [];
    folderId: string = "2";

    constructor() {
        chrome.tabs.query({active: true, currentWindow: true}, tabs => {
            let activeTab = tabs[0];
            this.url = activeTab.url;
            this.description = activeTab.title;
            this.image = activeTab.favIconUrl;
           // ChangeDetectorRef.detectChanges(); //this worked and inputs are updated but It didn't solve the issue with Select. 
        });

    }
}  

HTML：

<div class="container align-items-center p-2">
    <div class="row align-items-center">
        <div class="col-sm-1">
            <div class="mb-1">
                <img *ngIf="image" [src]="image"/>
            </div>
            <div class="mb-1">
                <label for="url" class="form-label">URL</label>
                <input type="text"
                       class="form-control form-control-sm" id="url"
                       aria-describedby="url" [(ngModel)]="url" name="url">

            </div>
            <div class="m-1">
                <label for="description" class="form-label">Description</label>
                <textarea type="text" class="form-control form-control-sm" id="description" aria-describedby="desc"
                          [(ngModel)]="description" name="description"></textarea>
            </div>
            <div class="m-1">
                <label for="description" class="form-label">Select Folder:</label>
                <select id="selected_dirs" class="form-select form-control form-control-sm"
                        aria-label="Default select example"
                        name="directory">
                    <option *ngFor="let f1 of recentFolders" [ngValue]="f1.id">{{f1.name}}</option>

                </select>
            </div>
            <div class="mt-4 mb-2">

                <button class="btn btn-primary btn-sm" (click)="openManager()">Open Manager</button>
                <button class="btn btn-dark btn-sm m-2" (click)="addBookmark()">Add bookmark</button>
            </div>

        </div>
    </div>
</div>

這是一個視覺演示

它應該填寫 URL 和描述

單擊輸入字段，沒有任何反應

單擊另一個輸入字段，它可以工作

這是書簽中的“檢查” window。

感謝您花時間閱讀這個長長的問題。

Answer 1

我相信，問題是 angular 檢測。 每當組件 angular 中的數據發生任何更改時，它都會運行更改檢測以在視圖上呈現此更改。 可以有兩種策略 OnPush 或 default。 您可以像這樣啟用它：

@Component({
    selector: 'app-add-bookmark',
    templateUrl: './add-bookmark.component.html',
    styleUrls: ['./add-bookmark.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush. //you can change it to default ChangeDetectionStrategy.Default
})

在這種情況下（默認），只要組件中的數據發生更改，angular 就會自行運行。 但這會讓事情變得有點滯后，你檢查一下它是否適合你。

因此，我的建議是，每當您對視圖進行任何更改時，都需要運行更改檢測來更新視圖。 為此，請添加一個 Hostlistener，每當用戶單擊此組件時，您都可以觸發更改檢測。

import { HostListener } from '@angular/core'; // add in component file

 @HostListener('click', ['$event'])
onMouseEnter(event: any) {    
      
  //Run change detection.
  this.changeDetection();
}

public changeDetection() { 
   this.ChangeDetectorRef.detectChanges();
}

此偵聽器將僅限於此組件。 如果您想了解有關更改檢測的更多詳細信息： https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

此外，如果您在調試時遇到任何上下文問題，您可以使用 Ngzone： https://angular.io/guide/zone