从父组件调用时，angular 2 变量在子组件方法中返回 null

Posted 2023-02-23

【中文标题】从父组件调用时，angular 2 变量在子组件方法中返回 null

【英文标题】：angular 2 variable returns null in child component method when called from parent component

【发布时间】：2020-05-22 21:19:19

【问题描述】：

我有父子组件通信，我想在子组件中启动一个方法，该方法应该打开一个模式并传递数据。当我使用 ViewChild 从父调用函数时，子方法组件中的变量返回 null，但变量内部应该有数据。当我在子组件中触发相同的函数时，数据是可用的，但从父组件调用时不是这种情况。缺少什么以及为什么从父组件启动时我看不到子组件中的数据？

父.html

    <button (click)="openModal()">New</button>

    <child><child>

父.ts

    import  FilterComponent  from './../filter/filter.component';

    @ViewChild(FilterComponent) filterComponent: FilterComponent;


    openModal()
       this.filterComponent.openModal(); // when fired from here, the function in the child component fires, but the variable inside it returns null
     

child.html

       <button (click)="openModal()">New</button>
       <modal><modal>

child.ts

     openModal()
       modalVisible = true;
        console.log(this.filter) returns null; when fired from parent component 
        console.log(this.filter) returns "filter data"; when fired within the component
      

【问题讨论】：

我很欣赏添加的代码，但恐怕这不足以确定什么是错的。您能否分享足够的代码来重现该问题？最好使用 StackBlitz 示例。

当您在父母中使用 viewchild 时，它不会初始化子组件.. 简单来说，它不会调用它的构造函数.. 您可以在父组件中使用 afterviewchild 生命周期进行确认...而您在未初始化的子组件中使用 this.filter ..这些这是代码中的问题陈述...它将始终为空..如果您想要值，您必须从父组件初始化

【参考方案1】：

据我所知，您目前正在您的 parentComponent 中选择所有 FilterComponents。为了使用this，您需要更具体。如果适合您的用例，您可以更改您的 ViewChild 以仅选择一个 FilterComponent。

例子：

父.html

<button (click)="openModal()">New</button>

<!-- notice the #child attribute -->
<child #child><child>

然后在 parent.component.ts 中

import  FilterComponent  from './../filter/filter.component';

@ViewChild("child") filterComponent: FilterComponent;


openModal()
   this.filterComponent.openModal(); // now that you're only selecting one element this function call should have access to this values. 
 

您也可以参考我在这里制作的相关堆栈闪电战：https://stackblitz.com/edit/angular-lqmc8x

祝你好运！

【参考方案2】：

我认为你需要一个 EventEmitter。

父.html <child (messageEvent)="openModal($event)"></child>

child.ts import Component, Output, EventEmitter from @angular/core; export class... @Output() messageEvent = new EventEmitter<string>(); openModal(val) this.messageEvent.emit(val);

child.html <button (click)="openModal(val)">Click</button>

或类似的东西。

【参考方案3】：

我认为您应该在这里重新考虑您的架构。

如果方法仅从父组件触发，则放入父组件中

如果该方法是从父组件和子组件触发的，则放入服务中