Angular material 如何从指令中注入材料组件？

是否有方法使用Render2从指令中注入材质组件

在我的例子中，我尝试生成一个指令，在mat按钮中显示mat进度微调器

例如，这里有一个指令。这段代码正在做一些类似于我正在尝试做的事情。因为我在我的项目中使用了角度材质，所以我想添加一个名为mat progress spinner的材质组件，而不是这个简单的gif

@Directive({
  selector: '[appButtonLoader]'
})
export class ButtonLoaderDirective {
  img: HTMLImageElement;

  @Input() set appButtonLoader(value: boolean) {
  this.toggle(value);
}

constructor(private element:ElementRef) {
  this.img = document.createElement('img');
  this.img.src = 'https://www.winston.com/cached/40181/images/spinner-white.gif';
  this.toggle(this.appButtonLoader);
}

toggle(condition: boolean) {
  condition ? this.show() : this.hide()
}

show() {
  this.element.nativeElement.appendChild(this.img);
}

hide() {
  this.img.remove();
}

}

stackblitz:

在此处找到解决方案：

在我的例子中，这还不够，因为Mat按钮不是ViewContainerRef，所以我无法创建组件

最终的解决方案是创建组件，然后使用Renderer2.appendChild移动它

---

Stackblitz更新：

为提高问题的可读性而进行的小改动。但我建议你自己尝试一下，并增加一些。与“这是一个要求，如何做到这一点”式的问题相比，包含“自己的努力”的问题通常会得到更多有用的反馈。问题编辑：Wesome work buddy，这正是我想要的：）（问题和答案都获得了较高的票数）