javascript - Angular2+ で動的に作成された要素に属性を追加するにはどうすればよいですか?

Question

私はこれを見てきましたが、動作しません - おそらく私が対象としている要素がカスタムコンポーネント内で動的に生成されているためです（<c-tabs>）。

これも見ましたが、カスタムコンポーネントのコードに触れることができないため、これは機能しないと思います。

関連要素

HTML

<c-tabs #mainComponentTabs1 [items]="tabItems"></c-tabs>

私はそれをターゲットにするために次の方法を試しました。どれも機能しません。

方法 1. 普通の古い Javascript を使用する:

ngAfterViewInit() {
    let att = document.createAttribute("id");
    att.value = "yada1";
    document.querySelectorAll(".c-tabs .hydrated")[0].setAttributeNode(att);
}

ngOnInit および ngOnViewInit メソッドで上記を使用しようとしましたが、役に立ちませんでした。 このメソッドは、奇妙なことに、ページがレンダリングされた後に Chrome コンソール ウィンドウで機能します。つまり、querySelected アイテムは id 属性を取得します。

方法２．Angular の Renderer2 を使用します。(確かに、ID が必要な特定のネイティブ要素にアクセスする方法がわかりません。

//first, declare target custom component element with viewchild:
export class MainComponent implements OnInit, AfterViewChecked, AfterViewInit {
    @ViewChild('mainComponentTabs1', { static: true }) c_tabs1: ElementRef;
    ...
    ngAfterViewChecked() {
        //neither of these approaches works.
        const c_tabs1El = this.c_tabs1.nativeElement;    
        this.renderer.setAttribute(c_tabs1El.items[0], 'id', 'dashboard-tab-link-search');

        const c_tabs1El2 = document.querySelectorAll("button.c-item");
        this.renderer.setAttribute(c_tabs1El2[0].nativeElement, 'id', 'dashboard-tab-link-dashboard');
      }
    ...
}