Angular5 - 每次在页面上使用组件时都会调用 ngOnInit

Question

我刚刚开始使用新的 angular 样式，发现了一个我无法解决的问题。 我制作了一个名为slider的组件。 该滑块在页面上使用了 3 次。 组件的 ngOnInit 被调用了 3 次，这导致了一些错误。

我应该将其重写为滑块服务吗？ 有没有办法做到这一点，以便组件的多个实例不会导致不需要的函数调用。

Answer 1

您在同一页面上使用该组件 3 次？

我建议两种解决方案，第一种是制作父组件并将数据传递给子组件。 其次是使注入Input()变量，在每次调用中，您可以像这样传递您想要的内容：

<p>This is my page</p>
<app-slider [data]="one"></app-slider>
<app-slider [data]="two"></app-slider>
<app-slider [data]="three"></app-slider>

在你的slider.ts你可以定义一二三

Input() one: any;
Input() two: any;
Input() three: any;