Angular 角度6-传递变量值

对于如何只将保存在Component1中的一个变量的值传递给Component2中的一个变量而不进行任何模板绑定，是否有任何选项

我有组件的页眉和页脚，页眉中有一个布尔变量测试，我需要在页脚组件中将变量测试的值传递给变量TEST2

我正在寻找一些带有@Input的解决方案，但没有找到任何没有模板绑定的解决方案，如[test]=“test”

简而言之，我只需要将值从一个

.ts

文件传递到另一个

.ts

文件

我遵循这个例子：

但变量仍然没有传递到组件

HeaderService.ts

从'@angular/core'导入{Injectable}；
@可注射（）
出口级校长服务{
getTheme：布尔；
}

您可以使用存储变量的服务，组件可以从中访问变量。更多关于服务的信息：

看看官方-家长和孩子通过服务进行沟通。其想法是创建一个具有一些RxJS

Subject

属性的服务。您的组件将注入此服务并使用这些

Subject

s-它们可以相互交互。为什么

主题

？因为您可以同时订阅和发出值。有关更多信息，请参阅本文

---

如果您不熟悉RxJS主题，作为一种解决方法（但这不是一个好的解决方案），您可以通过更改服务属性来共享同一服务的值。但在这种情况下，如果有任何更改，则无法通知您的组件。这就是主题很适合通过服务进行组件交互的原因。

您可以使用Angular services跨组件共享公共数据。请看我的答案

另一个选项是RxJs，您可以通过Observable与一些隔离组件进行通信

---

更新

@PatrikSpišk，当您使用getter时，应用程序中的任何更改都将导致“重新计算”该值。“提示”是您有一个变量（该变量是服务中定义的变量）。制作一个getter，使您可以使用组件的.html中的“getter”。您可以使用getter对组件的其他变量进行任何更改

更新2（更正了变量名称）

您的页脚组件。页脚需要知道getTheme的值

constructor(private headerService: HeaderService) 
get getTheme()
{
    return this.headerService.getTheme;
}

您的标题组件、标题需要知道nightTheme的值，并且可以更改

constructor(private headerService: HeaderService) 
get getTheme()
{
    return this.headerService.getTheme;
}
set getTheme(value)
{
    this.headerService.getTheme=value;
}
//You can do anywhere
this.getTheme=true

你的服务负责人服务

getTheme:any;
constructor(){}

---

headerService中只有一个变量getTheme（等于您可以使用另一个变量）。看到你的代码，我想你想引用“nightTheme”

你不能。。。使用公共服务或模板语法。组件不应该紧密耦合。您不能访问组件的属性，相反，您可以在您不想访问的组件中访问服务内部的值。在源代码中，您没有在任何地方调用changeDark和changeLight，这是您为服务设置值的地方。另外，我建议你将源代码移动到问题，编辑它并删除答案。对此我很抱歉，我已经编辑了我的帖子。你们可以看到，实际上我调用了那个函数，它触发了我定义的事件，除了最后一个我需要传递给Footer的事件component@PatrikSpišk，在组件中使用getter：不要声明nightTheme，只需：get nightTheme（）{返回this.headerService.getTheme；}但我根本不需要显示值。我只需要将值从.Header.ts中的一个变量传递到Footert.ts中的另一个变量。问题是我在Header和Footer组件中有相同的变量（nightTheme）。在header组件中有一个按钮，它应该使用changeDark（）函数将主题从浅色更改为深色。所以我的按钮做了我期望的事情，但只是在页眉组件中，所以我的意思是，当我点击按钮时，我的主题切换为黑色，因为函数将nightTheme设置为TRUE，但我需要在FooterComponent中将nightTheme设置为TRUE，同时当我点击HeaderComponentUpdate中的按钮时，回答我已经尝试了你的代码，但不起作用。。。Footer组件中的nighTheme变量仍然设置为False，而Header组件中的nighTheme变量设置为true。我写得太快了，并更改了函数的名称：请参见stackbliz