如何在Angular 8中未调用的组件之间传递数据[重复]

Posted 2023-02-22

【中文标题】如何在Angular 8中未调用的组件之间传递数据[重复]

【英文标题】：How To Pass Data Between Components That Not Being Called in Angular 8 [duplicate]

【发布时间】：2019-12-26 22:24:57

【问题描述】：

我是 Angular 的新手，但我相信这是一种使用 @Input 在 Angular 中的组件之间传递数据的方法：

在父组件中：

...
<app-child [childMessage]="parentMessage"></app-child>
...

在子组件中：

...
@Input() childMessage: string;
...

但就我而言，

我无法调用我想要传递的组件选择器。

我该如何传递数据？

Ps : 我的意思是“呼叫”是这样做的 --> <app-child></app-child>

【问题讨论】：

您对@Input 的假设是正确的，但我不明白为什么您不能使用子元素选择器。是因为它们不是以父子结构构成的吗？您能多描述一下您的用例吗？如果有的话，你会得到什么错误？

【参考方案1】：

您正在尝试传递一个组件值，它的结构方式我猜不存在。使用以下内容传入字符串。

<app-child [childMessage]="'parentMessage'"></app-child>

或者在你的父母中声明你试图传递的变量。

public parentMessage = "parentMessage";

我认为这是问题所在，因为语法看起来是正确的。

如果您在使用 <app-child></app-child> 之类的选择器渲染组件时遇到问题，请查看 stackblitz from the Angular docs 作为示例，可以在此处找到该用法的示例。

这可能会通过正确设置模块中的声明来解决。

【参考方案2】：

您可以在这两个组件之间共享服务，然后从父组件在共享服务中设置一个变量并在子组件中使用它，或者您可以在服务中添加 getter 和 setter 函数

【讨论】：

你太棒了，非常感谢。我花了将近一个小时来实现这个顺便说一句哈哈哈（因为缺乏对基础知识的理解）。

对于可能有同样问题的你们，对我来说this 是一个很好的参考，可以在 Angular 中使用服务实现组件之间的通信。