我试图拥有一个属性,当应用于按钮时,将加载器附加到按钮的内部内容。
以下内容将加载程序附加到按钮内容:
var test = this.renderer.createElement(this.el.nativeElement.childNodes[0], 'mat-spinner');
this.renderer.appendChild(this.el.nativeElement.childNodes[0], test);
mat-spinner元素在HTML中呈现,但角度渲染不适用于它。我猜这是因为一些有角度的错综复杂。
有没有人知道我在运行时正确呈现此元素的方法?
感谢。
答案 0 :(得分:1)
我试图拥有一个属性,当应用于按钮时,追加 加载到按钮的内部内容
如果我正确理解了您的问题,您可以考虑创建一个自定义按钮元素,该元素根据您通过@Input
传递到此自定义按钮组件的属性隐藏/显示mat-spinner
,而不是附加新创建的微调器到DOM。
例如,如果您的属性myAttribute
的值根据用户交互动态更改,则可以将此值“同步”到自定义按钮组件中,以便根据需要隐藏/显示微调器是快速演示,演示了这种方法:
自定义-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
不一定必须是布尔值,它可以是任何内容,您只需要调整ngIf
组件中的custom-button
条件。
不幸的是,您的问题没有太多背景信息,但您可以查看demo可能有用的内容。