我在两个不同的组件中有两个函数,我想在它们之间共享函数,但我不明白如何在我的项目中应用它。在组件中,我有一个getDatasFromMainTable().另一个,我有一个getDatasFromArchiveTable().I tried:
@Input() myFirstComponent!: MyfirstComponent;
和在函数中:
this.myFirstComponent.getDatasFromArchiveTable();
但我有一个消息
Cannot read properties of undefined (reading 'getDatasFromArchiveTable')
我读了很多关于行为主题,或@Input(), @ViewChild()或onChanges…但是我不知道如何把它应用到我的项目中,如果我需要它的话。
这就是服务的目的。
组件应该"dumb"从某种意义上说,它们不做任何业务方面的事情:它们将责任赋予服务。这就是依赖注入的作用。
所以,为了共享这些方法,创建一个包含它们的服务,并让你的组件在你的服务上调用这些方法。
你有很多方法在组件之间共享数据。
- 通过输入共享数据
- 通过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();
}
}
要在Angular中管理一个共享几个方法的组件,你有3个选项:
:创建包含公共方法的共享服务,并将其注入需要访问这些方法的组件中。共享服务充当保存共享逻辑的中心位置,组件可以根据需要使用服务的方法。这种方法促进了代码重用,并允许对共享方法的维护和修改。
:如果您有多个共享公共功能的组件,您可以创建一个包含共享方法的基本组件。然后,其他组件可以扩展基组件以继承共享方法。当组件具有相似的行为,但需要轻微的变化或额外的功能时,此方法非常有用。
抽象类:与继承类似,您可以创建包含共享方法的抽象类。然后组件可以扩展抽象类来继承这些方法。抽象类充当组件的蓝图,提供一组可以跨多个组件重用的通用方法。