Angular13:在组件之间共享函数



我在两个不同的组件中有两个函数,我想在它们之间共享函数,但我不明白如何在我的项目中应用它。在组件中,我有一个getDatasFromMainTable().另一个,我有一个getDatasFromArchiveTable().I tried:

@Input() myFirstComponent!: MyfirstComponent;

和在函数中:

this.myFirstComponent.getDatasFromArchiveTable();

但我有一个消息

Cannot read properties of undefined (reading 'getDatasFromArchiveTable')

我读了很多关于行为主题,或@Input(), @ViewChild()或onChanges…但是我不知道如何把它应用到我的项目中,如果我需要它的话。

这就是服务的目的。

组件应该"dumb"从某种意义上说,它们不做任何业务方面的事情:它们将责任赋予服务。这就是依赖注入的作用。

所以,为了共享这些方法,创建一个包含它们的服务,并让你的组件在你的服务上调用这些方法。

你有很多方法在组件之间共享数据。

  1. 通过输入共享数据
  2. 通过ViewChild共享数据
  3. 通过Output()和EventEmitter共享数据
  4. 与服务共享数据
  5. 组件之间共享相同的逻辑(方法)

在你的情况下,解决方案是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();
}
}

要在Angular中管理一个共享几个方法的组件,你有3个选项:

:创建包含公共方法的共享服务,并将其注入需要访问这些方法的组件中。共享服务充当保存共享逻辑的中心位置,组件可以根据需要使用服务的方法。这种方法促进了代码重用,并允许对共享方法的维护和修改。

:如果您有多个共享公共功能的组件,您可以创建一个包含共享方法的基本组件。然后,其他组件可以扩展基组件以继承共享方法。当组件具有相似的行为,但需要轻微的变化或额外的功能时,此方法非常有用。

抽象类:与继承类似,您可以创建包含共享方法的抽象类。然后组件可以扩展抽象类来继承这些方法。抽象类充当组件的蓝图,提供一组可以跨多个组件重用的通用方法。

最新更新