Angular 动态渲染角度2材质组件

我试图有一个属性，当应用到按钮时，会在按钮的内部内容中附加一个加载器

以下内容将加载程序附加到按钮内容：

var test = this.renderer.createElement(this.el.nativeElement.childNodes[0], 'mat-spinner');
this.renderer.appendChild(this.el.nativeElement.childNodes[0], test);

mat spinner元素在HTML中呈现，但角度呈现未应用于它。我猜这是因为一些复杂的角度

有人知道我在运行时正确渲染此元素的方法吗

谢谢

我试图有一个属性，当应用到一个按钮，附加 按钮内部内容的加载器

如果我正确地理解了你的问题，你可以考虑创建一个自定义按钮元素，它只是根据你通过这个自定义按钮组件传递的属性来隐藏/显示 Mat Spuln>代码>，而不是将新创建的旋转器附加到DOM。

例如，如果您有一个属性

myAttribute

who的值根据用户交互动态更改，您可以将此值“同步”到自定义按钮组件中，以便根据需要隐藏/显示微调器，下面是演示此方法的快速演示：

自定义按钮.component.ts

@Component({
  selector: 'custom-button',
  template: `
    <button mat-button>
      <span>{{ options.text }}</span>
      <mat-spinner class="spinner" 
        [diameter]="options.spinnerSize" 
        *ngIf="options.myAttribute">
      </mat-spinner>
    </button>
  `
})
export class CustomButton {
  @Input() options: any;
}

export class AppComonent {

  buttonOptions: any = {
    myAttribute: false,
    text: 'Apply Attribute',
    spinnerSize: 18
  }

  someFunc() {
    // do something with the custom attribute
    this.buttonOptions.myAttribute = true;
    setTimeout(() => {
      this.buttonOptions.myAttribute = false;
    }, 2500)
  }
}

然后可以根据属性值动态切换：

应用程序组件.ts

@Component({
  selector: 'custom-button',
  template: `
    <button mat-button>
      <span>{{ options.text }}</span>
      <mat-spinner class="spinner" 
        [diameter]="options.spinnerSize" 
        *ngIf="options.myAttribute">
      </mat-spinner>
    </button>
  `
})
export class CustomButton {
  @Input() options: any;
}

export class AppComonent {

  buttonOptions: any = {
    myAttribute: false,
    text: 'Apply Attribute',
    spinnerSize: 18
  }

  someFunc() {
    // do something with the custom attribute
    this.buttonOptions.myAttribute = true;
    setTimeout(() => {
      this.buttonOptions.myAttribute = false;
    }, 2500)
  }
}

myAttribute

不一定必须是布尔值，它可以是任何值，您只需调整

自定义按钮中的
ngIf
条件即可

遗憾的是，您的问题没有太多的上下文，但这里有一个您可以查看的示例，可能会有所帮助。
请同时添加模板代码和mat spinner css。mat-spinner是一个角度材质组件。我自己没有编写任何css。这是什么.el.nativeElement.childNodes[0]元素类型？它是
span
elementperfect。我不知道为什么我没有想到这一点。我把事情搞得太复杂了。谢谢