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;