Angular 按钮指令错误地附加子元素

你的指令奏效了.progressbar人有正确的"父母".我只将progressbar样式修改为position: absolute;和当前位置+宽度:

Updated directive个

import { Directive, ElementRef, Input, ViewContainerRef, Renderer2 } from '@angular/core';
import { MatButton } from '@angular/material/button';
import { MatProgressBar } from '@angular/material/progress-bar';

@Directive({
  selector: '[buttonLoader]'
})
export class ButtonLoaderDirective {
  progressElement: any;

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

  constructor(
    private viewContainerRef: ViewContainerRef, 
    private matButton: MatButton, 
    private renderer: Renderer2, 
    private elementRef: ElementRef) {
    this.loadComponent();
  }

  loadComponent() {
    this.viewContainerRef.clear();
    
    // Create Component
    const matProgress = this.viewContainerRef.createComponent(MatProgressBar);
    
    matProgress.instance.mode = 'indeterminate';
    
    // Move it
    this.progressElement = matProgress.injector.get(MatProgressBar)._elementRef.nativeElement

    this.renderer.appendChild(this.elementRef.nativeElement, this.progressElement);


    // Add custom class
    this.elementRef.nativeElement.classList.add('mat-load-button');
  }

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

  show() {
    this.progressElement.style.opacity = '0.7';
    this.progressElement.style.position = "absolute"
    this.matButton.disabled = true;
    this.progressElement.style.bottom = "10px";
    this.progressElement.style.width = "calc(100% - 10px)"

  }

  hide() {
    this.progressElement.style.opacity = '0';
    this.matButton.disabled = false;
  }
}

HTML个

  <button
    style="height: 80px"
    mat-raised-button
    color="primary"
    [buttonLoader]="true"
  >
    My Button
  </button>

以下是完整的Stackblitz个示例.

下面是结果: