angular - 如何在 Angular 6 中创建一个完全动态的按钮？

Question

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

下一部分是创建完全动态的按钮，这些按钮可以在放置在目标 View 中时进行自定义(就像表单中的文本输入一样)。我已尝试使大部分内容通用并且它们工作正常，但我似乎遇到的问题是使 (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 中不起作用，它给我以下错误:

Parser Error: Got interpolation ({{}}) where expression was expected

其他一切正常，但我不能使按钮完全动态，除非满足这一点，而且我找不到满足我要求的资源。

编辑 我添加了将组件导入我的 View 所使用的函数:

  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

这里你需要像下面这样的属性绑定(bind)和事件绑定(bind)。

app.component.html

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

app.component.ts

export class AppComponent  {
  name = 'Angular';

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

button.component.html

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

button.component.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');
  }


}

Here is solution on stackblitz