首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 6.1.1 - EventEmitter不会发送到父组件

Angular 6.1.1是一种流行的前端开发框架,它基于TypeScript构建,并且具有强大的功能和丰富的生态系统。在Angular中,EventEmitter是一个重要的概念,用于在组件之间进行通信。

EventEmitter是Angular中的一个类,用于在组件之间发送自定义事件。它允许一个组件触发一个事件,并且其他组件可以订阅这个事件并做出相应的响应。通过使用EventEmitter,我们可以实现父子组件之间的通信。

然而,在Angular 6.1.1中,有时候EventEmitter可能无法将事件发送到父组件。这可能是由于以下几个原因导致的:

  1. 事件未正确绑定:在父组件中,如果没有正确绑定子组件的事件,那么父组件将无法接收到子组件触发的事件。确保在父组件的模板中正确绑定子组件的事件。
  2. 事件未正确订阅:在父组件中,如果没有正确订阅子组件的事件,那么父组件将无法接收到子组件触发的事件。确保在父组件的代码中正确订阅子组件的事件。
  3. 组件层次结构问题:在Angular中,组件之间的层次结构非常重要。如果父组件和子组件之间存在层次结构问题,那么EventEmitter可能无法正常工作。确保父组件和子组件之间的层次结构正确。

如果遇到EventEmitter不发送到父组件的问题,可以尝试以下解决方法:

  1. 检查事件绑定和订阅:确保在父组件的模板中正确绑定子组件的事件,并在父组件的代码中正确订阅子组件的事件。
  2. 检查组件层次结构:确保父组件和子组件之间的层次结构正确。如果需要,可以重新设计组件的层次结构。
  3. 检查Angular版本:确保使用的是Angular 6.1.1版本或更高版本。有时候,一些问题可能会在旧版本中得到修复。

总结起来,EventEmitter是Angular中用于组件之间通信的重要概念。在Angular 6.1.1中,如果EventEmitter无法将事件发送到父组件,可以通过检查事件绑定和订阅以及组件层次结构来解决问题。确保使用的是最新版本的Angular也是一个好的做法。

腾讯云提供了一系列与Angular相关的产品和服务,例如云服务器、云数据库、云存储等。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于这些产品的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular中,组件向子组件传递 “模版内容引用”

比如弹窗组件不能在自己的内容中写死标题和页面的内容,        在页面上使用该组件时, 页面 动态向指定组件内占位传入“一些内容”,组件会把它们插入到它想要的地方!    ...2、递归组件使用时,要用到ngTemplateOutlet 来切换节点上的组件。 比如要定义菜单组件,涉及到两类组件,1是叶子菜单项,2是文件夹菜单项。 ...组件为了灵活,一部分内容定义在组件之外的(即主页面上),当它插入到子组件中的时候,必然要显示子组件内的一些数据,它才有意义。...import { Component, OnDestroy, OnInit, TemplateRef, Input } from '@angular/core'; /// 主页面 @Component...({ selector: 'app-root', template: ` Angular's ngTemplateOutlet 完整示意-----我是主页 <app-content

2.8K20

angular父子组件传值

angular父子组件传值 组件到子组件 1.组件传递数据 2.子组件接受数据 子组件组件 1.组件根据ViewChild获取子组件实例 2.子组件通过广播的形式,向子组件发送数据 子组件操作...引用 import { Component, OnInit, Input } from '@angular/core'; // //接收组件传过来的数据 @Input() title:any...(){ this.top.run(); } 2.子组件通过广播的形式,向子组件发送数据 组件app-news 子组件app-top 子组件操作 //子组件引用Output, EventEmitter...import { Component, OnInit, Output, EventEmitter } from '@angular/core'; //获取引用实例 @Output() private...outer = new EventEmitter(); //定义方法向组件传值 setParent(){ //向组件传值 this.outer.emit("我是子组件的数据

82310

Angular核心-父子间组件传递数据-重难点

(达内教育学习笔记)仅供学习交流 Angular核心-父子间组件传递-重难点 Angular核心-父子间组件传递数据-重难点方向一:=》子传递数据方向二:子=》父子组件传递数据的简便方法:...Angular核心-父子间组件传递数据-重难点 方向一:=》子传递数据 方向二:子=》 父子组件传递数据的简便方法: Vue.js和Angular中的父子间消息传递原理一样,都可以用口诀:“Props...组件通过触发特定事件(其中携带数据),把数据传递给组件组件提供事件处理方法) Child.ts:自定义事件发射器–输出属性 import { Component, EventEmitter,...= new EventEmitter() 写一个事件发射数据 doModify(){ console.log(this.userInput) //子组件此时想发射数据给组件...(不带#),第二个参数static指定该组件是否为“静态组件”—不会有时有时无的组件(比如ngIf,ngFor) 注意: 通过“ViewChild”-视图组件方式,组件可以获得任意子组件中的数据,

1.2K20

angular知识点梳理第三篇-组件

:在组件的ts文件中引入viewchild模块 【parent.component.ts】 方案二:通过@Output触发组件的方法 第一步:在子组件ts文件中引入angular的核心模块中的output...和EventEmitter模块 【children.component.ts】 第二步:在组件的视图层引入子组件的地方进行函数名字的使用 【parent.component.html】 第三步:在组件的.../app-children> 第三步:在子组件中的ts文件中使用@Input进行接收组件的值 【children.component.ts】 //这里我们需要引入angular核心模块中的Input模块进行接收组件的变量值...方案二:通过@Output触发组件的方法 这个方式就是同归广播的方式进行触发函数,将子组件中的数据主动传递到组件中去 第一步:在子组件ts文件中引入angular的核心模块中的output和EventEmitter...,Output,EventEmitter } from '@angular/core'; @Component({ selector: 'app-children', templateUrl:

2.2K10

Angular 从入坑到挖坑 - 组件食用指南

传递方法时,绑定在子组件上的属性是组件方法的名称,此处不能加 () ,否则就会直接执行该组件的方法 在传递数据给子组件时,也可以通过 this 来指代父组件,从而将整个组件作为数据绑定子组件上...在子组件中引入 Inupt,同时使用 @Input 装饰器来接收组件传递的数据 // 引入 Input 接口 import { Component, OnInit, Input } from '@angular...使用 @Output 装饰器配合 EventEmitter 实现 在子组件中引入 Output 和 EventEmitter,通过 @Output 装饰器定义一个事件触发器,然后就可以通过这个事件触发器的...emit 方法进行事件广播 // 引入 Output、EventEmitter import { Component, OnInit, Output, EventEmitter } from '@angular...,就可以通过在子组件上使用事件绑定的方式绑定到一个组件事件,通过 $event 获取到子组件传递的数据值 组件内容: 2、使用 @Output 装饰器配合 EventEmitter

15.8K30

Angular 组件通信的三种方式

原文:https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb 这个教程适合初学者看...如图,下面的页面里有个名为side-bar的组件组件内部有个toggle方法,可以控制显示或隐藏,这个需要其他组件来调用toggle的方法。 ?...image.png 我们可以通过以下三种方式来实现: 传递一个组件的引用给另一个组件 通过子组件发送EventEmitter组件通信 通过serive通信 每个例子都会有StackBlitz在线演示地址...传递一个组件的引用给另一个组件 Demo1 模板引用变量 模板引用变量通常用来引用模板中的某个 DOM 元素,它还可以引用 Angular 组件或指令或Web Component。...通过子组件发送EventEmitter组件通信 Demo2 这种方式利用事件传播,需要在子组件中写 app.component.html <app-side-bar-toggle (toggle

1.5K20

angular基础面试题_java web面试题

在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用 ngOnInit: 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。...Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。...ngOnDestroy:当 Angular 每次销毁指令/组件之前调用并清扫....父子组件传值 子组件暴露一个 EventEmitter 属性,当事件发生时,子组件利用该属性 emits(向上弹射)事件。组件绑定到这个事件属性,并在事件发生时作出回应。...输出给组件 @Output EventEmitter somethingChanged.emit(value)也叫事件发射器 触发组件值得改变 子组件接收值用的@input 组件样式 ViewEncapsulation.Native

13K50

Angular开发实践(四):组件之间的交互

Angular应用开发中,组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法。...一个组件可能是多个组件的子组件,有时候无法直接知道组件的类型,在Angular中,可通过类—接口(Class-Interface)的方式来查找,即让组件通过提供一个与类—接口标识同名的别名来协助查找...; @Output() ready: EventEmitter = new EventEmitter(); // 输出属性 ngOnInit() { this.ready.emit...} } 组件监听子组件的事件 子组件暴露一个 EventEmitter 属性,当事件发生时,子组件利用该属性 emits(向上弹射)事件。组件绑定到这个事件属性,并在事件发生时作出回应。...} 通过服务传递 Angular的服务可以在模块注入或者组件注入(均通过providers注入)。 在模块中注入的服务在整个Angular应用都可以访问(除惰性加载的模块)。

3.3K80
领券