Angular 4依赖注入

时间:2018-03-15 14:40:42

标签: angular dependency-injection

我想在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);
   }
}

这是我的问题:

  1. 这是在Angular中组织可重用函数的正确方法吗?

  2. 这是我在其他地方更改MyComponen的property1的正确方法(在此示例中,通过从myService Dependency调用alterProperty函数来更改property1)(它让我觉得我失去了对property1的控制) 。有没有更优雅的方法来解决它?

  3. 感谢任何建议。

1 个答案:

答案 0 :(得分:0)

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

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