如何从指令中注入材料成分?

时间:2018-08-29 09:09:06

标签: angular-material

是否可以使用renderer2从指令中注入材质组件?

在我的情况下,我尝试制定一条指令,以在mat按钮上显示mat-progress-spinner。

例如,这是一条指令。这段代码所做的事情与我正在尝试的类似。由于我在项目中使用的是Angular Material,因此我想添加一个名为mat-progress-spinner的Material Component,而不是这个简单的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:https://stackblitz.com/edit/load-button-directive?file=app%2Fbutton-loader.directive.ts

1 个答案:

答案 0 :(得分:1)

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

在我的情况下,这还不够,因为Mat-Button不是ViewContainerRef,所以我无法创建组件。

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

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