如何从另一个组件调用一个函数，同时保持另一个组件在 Angular 中的通用性？

Posted 2023-02-23

【中文标题】如何从另一个组件调用一个函数，同时保持另一个组件在 Angular 中的通用性？

【英文标题】：How can I call a function from another component while keeping the other component generic in Angular?

【发布时间】：2020-04-03 19:06:36

【问题描述】：

我正在尝试让组件 1 触发组件 2 中的功能，但组件 2 需要保持通用，以便任何组件都可以访问它。在不使其通用的情况下，我的代码如下所示：

组件1：

@Output() component2function = new EventEmitter<any>();
...
this.component2function.emit( param1, param2 );

component2 选择器：

<component1 (component2function)="component2function($event)"> </component1>

这应该会触发component2function，但现在我想在不显式使用component1 选择器的情况下触发相同的功能，以便component2function 可以由component1 以外的组件触发。我该怎么做？

【问题讨论】：

你为什么不使用服务？

【参考方案1】：

我会将函数放入共享服务中。这样，您需要做的就是通过每个组件的构造函数提供服务。组件 1、组件 2 和组件 3 都可以轻松访问此共享功能。

服务.ts

@Injectible(
   providedIn: "root"
)
export class SharedService 
    sharedFunction() 
        let theSolution = ....;

        return theSolution;
    

然后在component.ts中

@Component(
  selector: "component1",
  templateUrl: "./component1.component.html",
  styleUrls: ["./component1.component.css"]
)
export class Component1 implements OnInit 

    constructor(private sharedService: SharedService) 

    ngOnInit() 
        this.genericFunction();
    

    genericFunction() 
        this.sharedService.sharedFunction();
    

从那里您可以直接从 html 调用服务函数或从 html 调用上述组件函数。如果您正在管理数据，则共享服务中的状态将更加可预测。

【参考方案2】：

因此您需要一些最低限度的协议，即实现的组件具有此方法。您可以通过定义一个接口来实现这一点，该接口由component1继承，...：

interface MyInterface 
    component2function: EventEmitter<any>;

（来源：How to interface Output() and Input() decorators?）

这样，不必确切知道它是什么组件，但可以确定有这个方法。

【讨论】：

那么接口在component2中？如何从 component1 访问它？