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

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 。 如果您需要隐藏按钮，您可以像在购买组件中那样做