在 Angular 11 中投影内容时，是否可以获得对模板变量标识的元素的引用？

Question

I have a scenario where Component A projects some elements into Component B. I would like to display all such elements, and get a reference to elements identified by template variables (#content, #button).

Component A's template:

<app-component-b>
  <div #content></div>
  <button #button></button>
</app-component-b>

Component B's template:

<ng-content></ng-content>

From Component B, is it possible to get a reference to the #content and #button elements?

---

EDIT: Before posting I'd tried with ViewChild and ContentChild at OnInit time, but I wasn't getting anything back, which made me question if it even was possible. I tried fiddling with it a bit more, and it looks like it works with @ContentChild at AfterViewInit time.

Answer 1

It looks like this is achievable at least from AfterContentInit using @ContentChild.

export class ComponentB implements OnAfterContentInit {

    @ContentChild('content') content: HTMLDivElement;
    @ContentChild('button') button: HTMLButtonElement;

    ngAfterContentInit(): void {
        // --> ElementRef, ElementRef
        console.log(this.content, this.button);
    }

}

I do not know if this is good practice or a good solution though.