如何使用 EventEmitter 将函数传递给子组件?

Posted

技术标签:

【中文标题】如何使用 EventEmitter 将函数传递给子组件?【英文标题】:How to use EventEmitter to pass function to a child component? 【发布时间】:2019-04-04 09:59:45 【问题描述】:

我有一个父子组件设置,其中子元素上的(点击)事件,我需要调用父方法。我正在尝试 eventEmmiter 但收到此错误:

错误:com.tns.NativeScriptException:找不到模块:“事件”, 相对于:app/tns_modules/

代码 sn-p

Parent.component.html

<app-header (thisEvent)="navigate($event)"></app-header>

Parent.component.ts

import  Component  from "@angular/core";
@Component(
  moduleId: module.id,
  selector: "app-main",
  templateUrl: "./parent.component.html",
  styleUrls: ["./parent.component.css"]
)
export class ParentComponent 
naviagte(args)
this.router.navigate(["/"]);


Child.component.html:

<Button text="Tap" class="btn btn-primary" (tap)="onTap($event)"></label>

Child.component.ts:

import  Component, Input, Output  from "@angular/core";
import  EventEmitter  from "events";
@Component(
  selector: "app-header",
  moduleId: module.id,
  templateUrl: "./child.component.html",
  styleUrls: ["./child.component.css"]
)
export class ChildComponent 
  @Output()
  thisEvent= new EventEmitter();
  navigate(args) 
    this.thisEvent.emit(null);
  

【问题讨论】:

【参考方案1】:

应该从@angular/core而不是从events导入EventEmitter

import  Component, Input, Output, EventEmitter  from "@angular/core";

【讨论】:

像魅力一样工作。谢谢【参考方案2】:

你得到的错误是由于错误的导入

import  EventEmitter  from "events";

EventEmitter 应该从 angular/core 包中导入

import  EventEmitter  from '@angular/core';

【讨论】:

【参考方案3】:

从“@angular/core”导入 EventEmitter ;

来自“@angular/core”的EventEmitter

【讨论】:

以上是关于如何使用 EventEmitter 将函数传递给子组件?的主要内容,如果未能解决你的问题,请参考以下文章

如何将子函数的参数传递给父 reactjs

如何将父组件函数传递给子组件,然后从子 AngularJS 内部调用它

React - 使用 refs 将焦点函数传递给子组件

将参数传递给子节点解析器函数

将函数传递给reactjs中的子组件

将表作为参数传递给函数