我如何在组件传递一个on click事件的函数?

Question

Component1代码。我想把点击链接时运行的函数的名称传递给这个组件。

`<a [routerLink]="linkTo" class="nav-link" (click)="CLICKFUNCTION">
<span class="sidebar-icon">
<ng-content></ng-content>
</span>
<span class="sidebar-text">{{text}}</span>
</a>`

这里我使用的是component1。我想把函数名传递给组件。

<component1 text="Logout" functionName="CLICKFUNCTION"> </component1>

Answer 1

看来我们可以在这里使用@Output来实现您的方案。它允许父组件和子组件之间的通信。

component1.ts

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
@Component({
....
})
export class Component1 implements OnInit {
@Output clickLink = new EventEmitter(); // define output
constructor() { }
ngOnInit() { }
}

component1.html

<a [routerLink]="linkTo" class="nav-link" (click)="clickLink.emit()">

parent.html

<component1 text="Logout" (clickLink)="CLICKFUNCTION()"> </component1>

因此，只要点击component1内部的router link，就会运行CLICKFUNCTION()

参考:

• https://angular.io/guide/inputs-outputs sending-data-to-a-parent-component