在另一个组件中使用boolean变量

Question

我是在TypeScript下开始的，我在组件home.component.ts中有一个布尔的displayReport变量。我想在另一个组件series-list.component.ts中获取此变量的值。

public displayReport: boolean = false;

public viewReport(): void {
console.log(this.displayReport);
this.displayReport = !this.displayReport;

}

有可能吗？

///////////////////////////////编辑/////////////// ////////：

这是我做的：

home.component.ts组件中的

：

constructor(
private studyService: StudyService

）{}

public viewReport(): void {
console.log('displayReport : ' + this.studyService.displayReport);
this.studyService.displayReport = !this.studyService.displayReport;

}

series-list.component.ts组件中的

：

构造函数（private studyService：StudyService）{   }

在服务study study.service.ts：

public displayReport: boolean = false;

但是当我在series-list.component.html中执行此操作时：

<div *ngIf="this.studyService.displayReport"> </div>

我没有得到this.studyService.displayReport变量的值。我有这个错误：Unresolved variable studyService

我该怎么办？

Answer 1

要在组件之间共享值或方法，您需要创建一个service，例如，共享报告的report.service.ts以显示并将其传播到注入它的组件中。

以下是有关角度服务的官方文档：https://angular.io/tutorial/toh-pt4

Answer 2

• 如果    你的组件是孩子，你可以使用@Input（）传递它    只需在子Component中声明@Input变量并在其中传递它    你打电话给它。
• 否则    您可以将服务用作中间件并在模块的提供者中声明您的服务，它将作为单件对象工作

Answer 3

在编辑部分之后回答您的问题。摆脱“这个”。在你的HTML中。您可能还需要公开服务，以便从html引用它（不确定）。