如何在Clarity中移除Angular组件的包装元素？

我注意到Clarity设计系统的按钮在DOM中没有额外包装元素，出于清晰性（无意双关）、可访问性等原因，我非常喜欢这种实现。我曾寻找过类似方案，但部分方案可能影响Angular的变更检测等机制。Clarity采用的方案看起来非常简洁，但我无法成功复现：最好的结果也只是包装元素与内容在DOM中成为同级元素。

据我观察，他们的实现步骤如下：

• 将组件内容放入带引用的<ng-template>中
• 将引用关联到ViewChild

以下是相关代码片段：

组件装饰器代码

@Component({
  selector: 'clr-button',
  template: `
    <ng-template #buttonProjectedRef>
      <button
`

组件类代码

export class ClrButton implements LoadingListener {
  @Output('click') _click = new EventEmitter<boolean>(false);

  @ViewChild('buttonProjectedRef', { static: true }) templateRef: TemplateRef<ClrButton>;
}

奇怪的是，我找不到ViewChild的属性名“templateRef”在哪里被使用。

内容的提问来源于stack exchange，提问作者Koert van Kleef