如何在两个组件之间使用共享数据

Question

我有一个共享组件（一个带有“继续”按钮的输入搜索栏），我在其他两个组件（购买组件和出售组件）中使用它。 我想在我的购买组件中隐藏我的搜索栏组件的“继续”按钮，同时在我的销售组件中显示它。 为了实现这一点，我在我的购买组件中使用了 @Input continueButtonCheck，它隐藏了我的购买模块组件上的按钮，但也将它隐藏在了销售组件中。我需要相同的 continueButtonCheck 并将其传递给我的其他组件（销售组件）。

共享组件如下所示：

（共享）search-bar-component.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。如果你需要隐藏按钮，你可以像在购买组件中那样做