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

Question

我正在以新的角度风格烹饪，并找到了一个我无法解决的问题。我创建了一个名为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;