Question

我有一个带有按钮的简单组件。该按钮的动作处理程序将写入组件控制器（.ts文件）中，并在单击警报和日志时显示。

<button (click)="handleClick($event)"></button>

在 button.component.ts

中

handleClick($event) {
  alert('');
}

如果直接包含在页面中，则此组件可以正常工作：

<app-button></app-button>

现在，我正在尝试将按钮组件动态注入到占位符内。我需要这样做，因为我需要动态地（在for循环内）将多个组件注入到占位符中。

我经历了角度docs。我还阅读了网上的很多文章。 -this，this等。

问题：我能够在占位符中成功注入组件。但是，当我单击按钮时，我看到handleClick不是函数错误。为什么无法识别在按钮控制器中定义的按钮单击处理程序。

帮我找到丢失的那一块。

更新：问题是该组件的操作处理程序需要公开，如@CommercialSuicide在评论中所建议。谢谢您的所有回答和评论。

Answer 1

在您的app-button中定义：

@Output()
buttonClicked:EventEmitter<any> = new EventEmitter();

在app-button内，监听您需要的任何元素的click事件，并在某些处理程序中对其进行处理：

clickHnadlerInYourAppButton(){
  this.buttonClicked.emit();
}

像您一样在父对象中创建组件实例，并订阅其@Output()。例如：

yourAppButtonComponentInstance.buttonClicked.subscribe(c => console.log('here is your click'));

别忘了退订。

Answer 2

您正在调用的注入组件方法是公开的吗？如果它们是私有的，这是预期的行为，则不能在组件外部访问它们，只需将它们设置为public，您就可以从其他组件中调用它们。您可以在DOCS的“公共，私有和受保护的修饰符” 部分中了解有关修饰符的更多信息。

Answer 3

父组件HTML

<app-button *ngFor="let item of array(3);let i = index" [data]="i"></app-button>

父组件TS

export class AppComponent  {

  array(n) {

    return Array(n)

  }
}

按钮组件HTML

<button (click)='handleClick($event)'>A Button</button>

按钮组件TS

export class ButtonComponent implements OnInit {

  @Input() data

  constructor() { }

  ngOnInit() {
  }

  handleClick($event) {
    alert("clicked button-"+this.data)
  }
}

stackblitz.com

中的工作示例

Angular中的动态注入组件

3 个答案: