动态渲染Angular 2 Material组件

时间:2017-12-14 12:00:16

标签: angular angular-material2

我试图拥有一个属性,当应用于按钮时,将加载器附加到按钮的内部内容。

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

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

mat-spinner元素在HTML中呈现,但角度渲染不适用于它。我猜这是因为一些有角度的错综复杂。

有没有人知道我在运行时正确呈现此元素的方法?

感谢。

1 个答案:

答案 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可能有用的内容。