如何在兩個組件之間使用共享數據

Question

我在其他兩個組件（購買組件和出售組件）中使用了一個共享組件（一個帶有“繼續”按鈕的輸入搜索欄）。 我想在我的購買組件中隱藏我的搜索欄組件的“繼續”按鈕，同時在我的銷售組件中顯示它。 為了實現這一點，我在購買組件中使用了@Input continueButtonCheck，它隱藏了購買模塊組件上的按鈕，但也將其隱藏在出售組件中。 我需要相同的 continueButtonCheck 並將其傳遞給我的其他組件（銷售組件）。

共享組件看起來像這樣：

（共享）搜索欄組件.html 文件：

<input />
<button *ngIf="continueButtonCheck">continue</button> 

這用於我的其他兩個組件。

可以在這里找到一個例子：

https://stackblitz.com/edit/angular-ivy-jaqbnn?file=src%2Fapp%2Fbuy%2Fbuy.component.ts

我面臨的問題是我不知道如何訪問我的銷售組件中的“continueButtonCheck”屬性。

Answer 1

這是因為@Input() continueSearchButton默認未定義。 <button *ngIf="continueSearchButton">Continue</button> continueSearchButton將是假的，它會隱藏按鈕。

所以你可以設置@Input() continueSearchButton = true; 默認為true 。 如果您需要隱藏按鈕，您可以像在購買組件中那樣做