typescript Angular13:在组件之间共享函数

41ik7eoe  于 2023-05-30  发布在  TypeScript
关注(0)|答案(3)|浏览(117)

我有两个功能在两个不同的组件,我想分享他们之间的功能,但我不明白如何做,并applicate它在我的项目。在一个组件中,我有一个getDatasFromMainTable()。另一个是getDatasFromArchiveTable()。我试过:

@Input() myFirstComponent!: MyfirstComponent;

并且在函数中:

this.myFirstComponent.getDatasFromArchiveTable();

但我有个口信

Cannot read properties of undefined (reading 'getDatasFromArchiveTable')

我读了很多关于behaviorSubject的东西,或者@Input(),@ViewChild()或者onChanges...但我不知道如何应用到我的项目,如果我需要它。

kyks70gy

kyks70gy1#

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

服务:创建一个包含公共方法的共享服务,并将其注入到需要访问这些方法的组件中。共享服务充当保存共享逻辑的中心位置,组件可以根据需要使用服务的方法。这种方法促进了代码的重用,并允许轻松维护和修改共享方法。
继承:如果您有多个共享公共功能的组件,则可以创建一个包含共享方法的基组件。然后,其他组件可以扩展基组件以继承共享方法。当组件具有类似的行为但需要轻微的变化或附加功能时,这种方法很有用。
**抽象类:**与继承类似,您可以创建一个包含共享方法的抽象类。然后组件可以扩展抽象类以继承方法。抽象类充当组件的蓝图,提供了一组可以在多个组件之间重用的公共方法。

fwzugrvs

fwzugrvs2#

这就是服务的目的。
组件应该是“哑”的,因为它们没有任何商业智慧:他们给予提供服务。这就是依赖注入的意义。
因此,要共享这些方法,请创建一个包含它们的服务,并让组件在服务上调用这些方法。

68bkxrlz

68bkxrlz3#

你有很多方法可以在组件之间共享数据。
1.通过输入共享数据
1.通过ViewChild共享数据
1.通过Output()和EventEmitter共享数据
1.与服务共享数据
1.组件之间共享相同的逻辑(方法)
在你的情况下,解决方案是5号。如果你想有共享的方法(一些逻辑和使用它aproach整个应用程序)
简单服务示例:

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();
     }

  }

相关问题