如何从 TypeScript 文件中的父级获取子组件变量和函数

Posted 2023-02-23

【中文标题】如何从 TypeScript 文件中的父级获取子组件变量和函数

【英文标题】：How to get Child Component variables and functions from Parent in TypeScript file

【发布时间】：2019-06-15 02:56:08

【问题描述】：

对 Angular 很陌生，但我知道您可以从 html 代码中设置子变量，也可以使用事件从中获取内容，但我的问题与从 ParentComponent 类获取实际的 ChildComponent 更相关。

我不能只将 Children 作为 Parent 中的变量，以便我可以从那里获取/设置变量并调用函数吗？或者这不是 Angular 应该如何工作的？

我尝试将所有内容添加到 NgModule 并将 Children 注入 Parent 构造函数，但 Angular 告诉我：

ERROR 错误：未捕获（承诺中）：错误：StaticInjectorError(AppModule)[ParentComponent -> ChildrenComponent]： StaticInjectorError（平台：核心）[ParentComponent -> ChildrenComponent]： NullInjectorError: 没有 ChildrenComponent 的提供者！

如果需要，我可以提供一些我所拥有的代码示例，但如果有人可以指出正确的问题/资源（如果可能的话）或者只是解释为什么它还不够：)

谢谢！

【问题讨论】：

查看 Angular 的英雄之旅示例。 angular.io/tutorial/toh-pt1 大多数初学者问题都直接在此处通过示例进行解释。我发现花时间并实际跟进的人会更快地掌握 Angular。

是的，但一切都是使用 Html 作为“胶水”完成的，而我希望能够直接从 component.ts 文件中获取所有内容。由于我在任何我理解的地方都没有提到这一点，因此我可能不会以“Angular 方式”考虑问题，但在切换相当多的代码之前还不确定。

哦，对不起，我误读了你的问题。看起来@jithesh-kumar 已经抓住了你-

【参考方案1】：

代码如下：

import ViewChild from '@angular/core';

// Ceate object of ChildComponent
@ViewChild( ChildComponent ) childcomponent: ChildComponent;

// Accessing childComponent variable using object
childcomponent.variablename;

// Accessing method of ChildComponent using object 
childcomponent.MethodName();

【讨论】：

TypeError：无法读取未定义的属性“getId”。我使用成员变量在构造函数之外创建了 childcomponentvariable，它的用途是什么？无论如何，我会寻找 ViewChild 的广告文档，谢谢 :)

试试这个。在 ngOnInit()

中初始化您的变量

我无法真正初始化它，因为我无法手动注入子组件构造函数依赖项，可以吗？

好的，我明白你的意思了。即使我仍然收到未定义的错误，它似乎也可以部分工作。明天我得继续看看。非常感谢！