将自定义组件库中的数据注入其服务答案

【问题标题】：Injecting data from custom component library to its services将自定义组件库中的数据注入其服务
【发布时间】：2019-12-09 21:58:00
【问题描述】：

我正在开发一个自定义 Angular 组件库，当添加到其他 Angular 项目时，它需要配置一些参数。这个库在添加到其他Angular项目时需要配置一些参数。

我研究了在 Angular 服务中注入数据的方法，以下是对已完成工作的概述：

app.component.html（来自我们将添加此自定义库的其他 Angular 项目）

<my-component paramA="abc" paramB="def"></my-component>

我的组件.component.ts

@Component({
...
  providers: [
    { provide: 'paramA', useValue: this.paramA },
    { provide: 'paramB', useValue: this.paramB },
  ]
}

export class MyComponent implements OnInit {
    @Input() paramA: string;
    @Input() paramB: string;

constructor(private serviceA: AService, private serviceB: BService);
...
}

a.service.ts

@Injectable({
    providedIn: 'root'
})
export class AService {
    constructor(
        @Inject('paramA') public paramA: string
    ) {
         this.paramA = paramA;
    }
}

这会引发错误，因为组件装饰器无法访问类属性。

实现这一目标的正确方法是什么？

【问题讨论】：

标签： angular typescript dependency-injection web-component angular-library

【解决方案1】：

我不太确定我是否正确解决了您的问题，但如果您需要配置库/模块，请在将其导入应用程序时进行。使用静态 forRoot 或 forChild 方法。我认为ngx-translate 是这种方法的一个很好的例子。

【讨论】：

我不确定是否可以在导入时配置库，因为某些参数是应用配置的一部分，而其他参数则需要用户操作（比如创建帐户）
对于静态配置，您可以使用 forRoot/forChild，记住您可以在这些方法中传递任何内容以增加灵活性，例如函数或对象/服务。在动态数据的情况下，请考虑创建可用于解决您的特定情况的公开数据操作方法的服务。不幸的是，我对您的方法知之甚少，无法提出更具体的建议。