activeElement 不检测 p-editor - Angular

问：

HTML

                            <p-editor #editor *ngSwitchCase="1" #textInput="ngModel" [(ngModel)]="placeholder.value" (onTextChange)="handleInputChange($event)"
                                id="placeholder{{i}}" name="placeholder{{i}}" [placeholder]="l('AddText')" required
                                [style]="{height:'180px', 'width': '100%'}" formats>
                                <p-header>
                                    <span class="ql-formats">
                                        <button class="ql-bold" aria-label="Bold"></button>
                                        <button class="ql-italic" aria-label="Italic"></button>
                                        <button class="ql-underline" aria-label="Underline"></button>
                                        <button class="ql-strike" aria-label="Strike"></button>
                                    </span>
                                    <span class="ql-formats">
                                        <button class="ql-list" value="ordered"></button>
                                        <button class="ql-list" value="bullet"></button>
                                    </span>
                                    <span class="ql-formats">
                                        <select class="ql-font">
                                            <option value="calibri">Calibri</option>
                                            <option value="microsoftsansserif">Sans Serif</option>
                                            <option value="inconsolata">Inconsolata</option>
                                            <option value="mirza">Mirza</option>
                                            <option value="arial">Arial</option>
                                        </select>
                                    </span>
                                    <span class="ql-formats">
                                        <select class="ql-size">
                                            <option value="8pt">8pt</option>
                                            <option value="9pt">9pt</option>
                                            <option value="10pt">10pt</option>
                                            <option value="11pt">11pt</option>
                                            <!-- <option value="12pt">12pt</option> -->
                                            <option value="12.5pt">12.5pt</option> <!--12pt non viene rilevato da Word, funzionano tutti i numeri tranne questo.-->
                                            <option value="13pt">13pt</option>
                                            <option value="14pt">14pt</option>
                                        </select>
                                    </span>
                                    <span class="ql-formats">
                                        <select title="Text Color" class="ql-color" defaultValue="rgb(0, 0, 0)">
                                            <option value="#000000" label="#000000"></option>
                                            <option value="#e60000" label="#e60000"></option>
                                            <option value="#ff9900" label="#ff9900"></option>
                                            <option value="#ffff00" label="#ffff00"></option>
                                            <option value="#008a00" label="#008a00"></option>
                                            <option value="#0066cc" label="#0066cc"></option>
                                            <option value="#ffffff" label="#ffffff"></option>
                                            <option value="#facccc" label="#facccc"></option>
                                            <option value="#ffebcc" label="#ffebcc"></option>
                                            <option value="#ffffcc" label="#ffffcc"></option>
                                            <option value="#cce8cc" label="#cce8cc"></option>
                                            <option value="#cce0f5" label="#cce0f5"></option>
                                            <option value="#bbbbbb" label="#bbbbbb"></option>
                                            <option value="#f06666" label="#f06666"></option>
                                            <option value="#ffc266" label="#ffc266"></option>
                                            <option value="#ffff66" label="#ffff66"></option>
                                            <option value="#66b966" label="#66b966"></option>
                                            <option value="#66a3e0" label="#66a3e0"></option>
                                        </select>
                                        <select title="Background Color" class="ql-background"
                                            defaultValue="rgb(255, 255, 255)">
                                            <option value="#000000" label="#000000"></option>
                                            <option value="#e60000" label="#e60000"></option>
                                            <option value="#ff9900" label="#ff9900"></option>
                                            <option value="#ffff00" label="#ffff00"></option>
                                            <option value="#008a00" label="#008a00"></option>
                                            <option value="#0066cc" label="#0066cc"></option>
                                            <option value="#ffffff" label="#ffffff"></option>
                                            <option value="#facccc" label="#facccc"></option>
                                            <option value="#ffebcc" label="#ffebcc"></option>
                                            <option value="#ffffcc" label="#ffffcc"></option>
                                            <option value="#cce8cc" label="#cce8cc"></option>
                                            <option value="#cce0f5" label="#cce0f5"></option>
                                            <option value="#bbbbbb" label="#bbbbbb"></option>
                                            <option value="#f06666" label="#f06666"></option>
                                            <option value="#ffc266" label="#ffc266"></option>
                                            <option value="#ffff66" label="#ffff66"></option>
                                            <option value="#66b966" label="#66b966"></option>
                                            <option value="#66a3e0" label="#66a3e0"></option>
                                        </select>
                                    </span>
                                </p-header>
                            </p-editor>

`Typescript`


 this.focusableElements = Array.from(
                document.querySelectorAll("input[id^='placeholder']:not([disabled]), select[id^='placeholder']:not([disabled]), p-editor[id^='placeholder']:not([disabled]), input.p-element:not([disabled])")
            ) as HTMLElement[];
            let focusedIndex = this.focusableElements.findIndex((element) => element === document.activeElement);

在我必须选择所有 ，就像这样，例如： 'input#placeholder1，它们没有被禁用。querySelectorAll inputselect p-editor

我需要我选择的元素的索引。它适用于除 focusedIndex 返回 -1 之外的所有标签。p-editor

将不胜感激。

focusedIndex == this.focusableElements.findIndex((element) => element.tagName.toLowerCase() === "p-editor" && element.getAttribute("id") === "placeholder");

我也尝试了这串代码，但什么都没有：focuesIndex 总是返回-1