angular-material - 如何从指令注入(inject) Material 组件？

Question

有没有办法使用 renderer2 从指令注入(inject) Material 组件？

就我而言，我尝试制定一个指令，在 mat-button 中显示 mat-progress-spinner。

例如，这是一个指令。这段代码所做的事情与我正在尝试做的事情类似。由于我在项目中使用 Angular Material，因此我想添加一个名为 mat-progress-spinner 的 Material 组件，而不是这个简单的 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();
}

}

堆栈 Blitz :https://stackblitz.com/edit/load-button-directive?file=app%2Fbutton-loader.directive.ts

Answer 1

在这里找到解决方案:https://angular.io/guide/dynamic-component-loader

就我而言，这还不够，因为 Mat-Button 不是 ViewContainerRef，所以我无法 createComponent。

最终的解决方案是 createComponent 然后使用 Renderer2.appendChild 移动它

Stackblitz 更新:https://stackblitz.com/edit/load-button-directive?file=app%2Fbutton-loader2.directive.ts