如何在Angular中将变量从组件检索到另一个？ （不在 Html 页面中，而是在组件中）

Posted 2023-02-22

【中文标题】如何在Angular中将变量从组件检索到另一个？ （不在 Html 页面中，而是在组件中）

【英文标题】：How to retrieve variable from component to another in Angular? (not in the Html page, but in the component)

【发布时间】：2021-06-04 04:37:11

【问题描述】：

在子组件中，我有一个字符串：

@Input() helloMessage:string;

我需要这个字符串从父组件的另一个字符串中获取值，并将这个值访问到子组件中。我不需要值在 html 中可见，也不知道如何从父组件传递访问变量。 所以this.helloMessage=parentComponentVariable，因为我需要在子组件的方法中使用helloMessage变量。

【参考方案1】：

这是一个基本的数据绑定概念。尝试类似以下的操作。 子组件TS文件

@Input() helloMessageChild:string;

父组件TS文件

helloMessageParent = '';

Pret 组件 HTML 文件

<app-child-component [helloMessageChild]="helloMessageParent"></app-child-component>

https://angular.io/guide/two-way-binding

这是标准方式。如果出于任何原因不想进行数据绑定，则必须将服务与 BehaviorSubject 一起使用。您必须从父级发出数据并订阅子级发出的数据。

https://medium.com/@weswhite/angular-behaviorsubject-service-60485ef064fc

在实践中，服务用于将数据从一个组件传递到另一个没有父子关系的组件。

【讨论】：

但是我不需要在html页面中链接连接，而是在组件中。在子组件中，我需要检索父组件变量的值。

如果你试图做一些除了数据绑定或订阅 observable 之外的事情，那么你在 Angular 世界中做错了。