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;