如何在角度6中创建全动态按钮？

Question

我正在为我的应用程序创建动态组件，这些组件可以在程序的各个部分中重复使用。到目前为止，我已经能够创建文本输入，并使用将其动态添加和自定义componentFactory为表单，并且它们可以完美地工作。

下一部分是创建完全动态的按钮，当将其放置在目标视图中时可以对其进行自定义（就像带有表单的文本输入一样）。我试图使大多数事物通用，并且它们可以正常工作，但是我似乎遇到的问题是使(click)函数动态化。我也想添加需要使用触发的功能componentFactory，但是由于某种原因，我无法这样做。

我找不到任何资源可以详细说明我遇到的这个特定问题。这是我到目前为止所做的组件：

button.component.ts

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ButtonComponent implements OnInit {

  @Input() group: FormGroup;
  @Input() type: string;
  @Input() description: string;
  @Input() class: string;
  @Input() data: string;
  @Input() callFunction: string;


  constructor() { }

  ngOnInit() {
  }

}

button.component.html

<div [formGroup]="group">
  <button type="{{ type }}" class="{{ class }}" (click)="{{callFunction}}">{{ description }}</button>
</div>

该(click)不是在工作button.component.html，它给了我下面的错误：

解析器错误：在需要表达式的地方进行了插值（{{}}）

其他所有操作都可以，但是除非能够满足要求，否则我无法使按钮完全动态，并且我无法找到满足我要求的资源。

编辑我添加了将组件导入视图的功能：

  buildLoginButton(){
    let data = {
      type: "button",
      class: "btn btn-primary px-4",
      description: this.translate.transform("pages[login_page][login_form][buttons][login]"),
      callFunction: "login()", //I have tried this.login() as well
      group: this.userForm
      }
    const inputFactory = this.resolver.resolveComponentFactory(ButtonComponent);
    const loginButton = this.login_button.createComponent(inputFactory);
    loginButton.instance.group = data.group;
    loginButton.instance.type = data.type;
    loginButton.instance.class = data.class;
    loginButton.instance.description = data.description;
    loginButton.instance.callFunction = data.callFunction;
  }

Answer 1

这里您需要属性绑定和事件绑定，如下所示。

应用程序组件.html

<app-button description="Dyanmic Button" 
  class="button" (callFunction)="onButtonClicked($event)" >
</app-button>

应用程序组件.ts

export class AppComponent  {
  name = 'Angular';

  onButtonClicked(event) {
   console.log(event); // handle button clicked here.
  }
}

按钮.component.html

<div [formGroup]="group">
  <button [type]="type" [class]="class" (click)="onClick($event)">
   {{ description }}
  </button>
</div>

按钮组件.ts

import { Component, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css'],
  encapsulation: ViewEncapsulation.None

})
export class ButtonComponent implements OnInit {

  @Input() group: FormGroup;
  @Input() type: string;
  @Input() description: string;
  @Input() class: string;
  @Input() data: string;
  @Output() callFunction = new EventEmitter();



  constructor() { }

  ngOnInit() {

    this.group = new FormGroup({
      firstName: new FormControl()
    });
  }


  onClick(event) {
    this.callFunction.emit('I am button');
  }


}

这是 stackblitz 上的解决方案