动态渲染角2材料元件
我试图有一个属性，当应用到一个按钮，附加一个加载程序到按钮的内部内容。
下面将加载器附加到按钮内容中：
var test = this.renderer.createElement(this.el.nativeElement.childNodes[0], 'mat-spinner');
this.renderer.appendChild(this.el.nativeElement.childNodes[0], test);mat-旋转元素在HTML中呈现，但是角度渲染不适用于它。我猜这是因为一些角度上的复杂。
有人知道我如何在运行时正确地呈现这个元素吗？
谢谢。
回答 1
Stack Overflow用户
发布于 2017-12-14 13:45:54
I试图有一个属性，当应用于按钮时，将加载程序附加到按钮的内部内容
如果我正确理解您的问题，您可以考虑创建一个定制按钮元素，该元素仅根据通过mat-spinner传递到这个自定义按钮组件的属性来隐藏/显示@Input，而不是将新创建的旋转器附加到DOM中。
例如，如果您有一个属性myAttribute，该属性的值根据用户交互动态变化，您可以将该值“同步”到自定义按钮组件中，以便根据需要隐藏/显示旋转器，下面是演示这种方法的快速演示：
custom-button.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;
}在组件中使用此自定义按钮时，mat-spinner已经是DOM的一部分：
app.component.html
<custom-button [options]="buttonOptions" (click)="someFunc()"></custom-button>然后可以根据属性值动态切换：
app.components.ts
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不一定非得是布尔值，它可以是任何东西，您只需要调整custom-button组件中的ngIf条件。
不幸的是，您的问题没有太多的上下文，但是这里有一个您可以查看的demo，它可能会有所帮助。
https://stackoverflow.com/questions/47812888
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号