Angular13：组件之间共享功能答案

【问题标题】：Angular13: Share functions between componentsAngular13：组件之间共享功能
【发布时间】：2022-10-06 19:30:48
【问题描述】：

我在两个不同的组件中有两个功能，我想在它们之间共享功能，但我不明白如何在我的项目中执行和应用它。在一个组件中，我有一个getDatasFromMainTable(). 另一方面，我有一个getDatasFromArchiveTable(). 我试过了：

@Input() myFirstComponent!: MyfirstComponent;

在一个函数中：

this.myFirstComponent.getDatasFromArchiveTable();

但是我有消息

Cannot read properties of undefined (reading 'getDatasFromArchiveTable')

我阅读了很多关于behaviorSubject 或@Input()、@ViewChild() 或onChanges 的内容......但如果我需要它，我不知道如何将它应用到我的项目中。

【问题讨论】：

这两个组件是否完全相关？一个是另一个的孩子吗？
不，但我认为可以有两个孩子，也许我需要一个父组件。就像服务一样。你怎么看？
您可以让它们都扩展一个作为指令的超类，并在那里保持共享状态和行为。

标签： angular typescript

【解决方案1】：

这就是服务的目的。

组件应该是“愚蠢的”，因为它们没有任何商业意义：它们将责任交给服务。这就是依赖注入的意义所在。

因此，要共享这些方法，请创建一个包含它们的服务，并让您的组件在您的服务上调用这些方法。

【讨论】：

他们之间有亲子关系吗？
@Octaz 是否愿意，由您决定。服务是一个单例，它不是真正的父/子，而是一个可以在任何地方使用的已定义实体。
感谢您的回答，我将建立一个服务，看看它是否可以解决我的问题。

【解决方案2】：

您有很多方法可以在组件之间共享数据。

通过输入共享数据
通过 ViewChild 共享数据
通过 Output() 和 EventEmitter 共享数据
与服务共享数据

在组件之间共享相同的逻辑（方法）

在您的情况下，解决方案将是第 5 号。如果您想拥有可共享的方法（一些逻辑并使用它接近整个应用程序）

简单服务示例：

import { Injectable } from '@angular/core';

@Injectable()
export class ExampleOfService{


  constructor() { }

  exampleOfFunction() {
   doSomething();
  }

}

之后，您可以在每个组件中调用您的方法。您可以添加参数等...

  import { Component, OnInit  } from '@angular/core';
    
  @Component({
   selector: 'app-example-component',
   template:  ['./app-example-component.html'],
   styleUrls: ['./example.component.scss']
    })

export class ExampleComponent implements OnInit{
   constructor(private exampleOfService: ExampleOfService) { }

ngOnInit(){
     //you can subscribe or whatever you need.
     this.exampleOfService.exampleOfFucntion();
     }

  }

【讨论】：

【解决方案3】：

标准的 Angular 方式是使用共享服务。

这是一个教程来展示如何做到这一点：

https://www.youtube.com/watch?v=gqZNiON_9-w

【讨论】：