Question

我想在Angular中重用一个函数，它可以改变多个组件的属性（相同类型）。第一种解决方案是将此函数作为全局变量导入。

Utilis.ts

 export function alterProperty(property: CustomProperty) {
    .... // some change on property
 }

component.ts

import {alterProperty} from './Utilis.ts'
class MyComponent {
    property1: CustomProperty;
    constructor(){}
    handleClick() {
      alterProperty(this.property1);
    }
}

在我阅读了一些关于Angular Dependency Injection的文章之后，我意识到这可能不是一个好的解决方案，所以我想出了另一个解决方案。

myService.ts

@Injectable()
export class MyService1 {
    constructor(){}
    alterProperty(property: CustomProperty)
}

component.ts

import MyService1 from 'myService.ts'
@Component{
    providers: [MyService1]
}
export class MyComponent {
   property1: CustomProperty;
   constructor(private service1:MyService1){}
   handleClick(){
      this.service1.alterProperty(this.property1);
   }
}

这是我的问题：

这是在Angular中组织可重用函数的正确方法吗？
这是我在其他地方更改MyComponen的property1的正确方法（在此示例中，通过从myService Dependency调用alterProperty函数来更改property1）（它让我觉得我失去了对property1的控制）。有没有更优雅的方法来解决它？

感谢任何建议。

Answer 1

答案1.）您可以在src下的共享目录中拥有服务或实用程序。此服务中的功能将负责更改属性。

答案2.）AFAIK，拥有共享服务是一种有效的解决方案。只要需要，就会将其注入组件中。可能有更好的解决方案，但这个也不正确。

Angular 4依赖注入

1 个答案: