Angular 2 函数库答案

【问题标题】：Angular 2 functions libraryAngular 2 函数库
【发布时间】：2017-06-05 21:00:52
【问题描述】：

在我的应用程序中，我需要创建一个函数库，以便从不同的组件进行访问。做这个的最好方式是什么？我是否需要使用所有功能或类或模块或组件来提供服务？

在这个库中，如果我从一个组件调用一个函数，并且这个函数需要访问调用者中的一个变量，是否可以这样做？

【问题讨论】：

非详细回答：创建服务，导入服务，从其他组件调用服务上的功能

标签： function angular angular-services angular-components

【解决方案1】：

如果它只是一组单独的辅助函数，最简单的方法是使用您的辅助方法创建一个 @Injectable 服务，然后将其注入到任何需要它们的组件中。您也可以提供公共变量，以便在您的 html 中访问它们。

@Injectable()
export class Helpers {
    helper1() { return "hello"; }
    helper2(x) { return x + 1 }
}

@Component({
    providers: [Helpers],
    template: "<div>{{helper1()}}</div>"     // will display 'hello'
)}
export class MyComponent {
    public helper1: Function = Helpers.helper1;

    constructor() {
        console.log(Helpers.helper2(5));    // will output '6'
    }
}

这对于一组简单的随机效用函数非常有用。如果您需要更深入的内容，请说明，我们可以提供替代解决方案。

【讨论】：

太好了，这是我真正需要确定的。我以这种方式在这里做了，但发现了一个限制。在我的服务中，我无法访问组件中的变量，并且由于我使用的是模式驱动的表单，因此在某些功能中我需要访问该表单。是否可以不将表单作为参数发送？
啊，作为服务不，如果它是单独的，你可以通过参数传递，但你说你不想这样做。如果您需要以有意义的方式与组件交互，您可能希望创建一个使用此服务的组件类，并通过 @input 和 output 与父组件交互
明白。我会尝试遵循这种方式。非常感谢 Joshua。