Angular中子组件触发父组件中的事件的两种方式

方式一（不推荐，容易产生循环依赖）：

在子组件的TS文件中 import 引入父组件，并在 constructor 注册。
通过this.子组件别名.方法名()，即可调用

 // 步骤1
import { ExternalPersonManageComponent } from '../external-person-manage.component';
 
export class PerAddEditComponent implements OnInit {
  // 步骤2
  constructor(private externalPersonManageComponent: ExternalPersonManageComponent) {}
  
  do() {
      // 步骤3
      this.externalPersonManageComponent.getListByComId()
  }
}

方式二（推荐）：

通过emit自定义事件触发父组件的方法

 // 子组件TS文件：
// 步骤1
import { Output,EventEmitter } from '@angular/core';
 
export class PerAddEditComponent implements OnInit {
  constructor() {}
  // 步骤2
  @Output() refresh: EventEmitter<any> = new EventEmitter<any>();
  
  // 步骤3
  do() {
      this.refresh.emit('');
  }
}
 
// 父组件HTML：
<子组件 (refresh)="父组件的方法()"></子组件>

posted @ 2022-07-08 16:03 RHCHIK 阅读(1179) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Angular中父组件访问子组件的数据、方法【掌控子元素】

· Vue项目中如何在父组件中直接操作子组件的数据或方法

· angular父子组件方法互调方案

· Vue子组件调用父组件事件的三种方法

· Vue中子组件调用父组件的三种方法（转）

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

百索园前端

懂一点代码的程序员

Angular中子组件触发父组件中的事件的两种方式

方式一（不推荐，容易产生循环依赖）：

方式二（推荐）：

搜索

随笔分类

CMS模板

后端开发

开发助手

前端开发

数据库

系统

组件库

	// 步骤1
	import { ExternalPersonManageComponent } from '../external-person-manage.component';

	export class PerAddEditComponent implements OnInit {
	// 步骤2
	constructor(private externalPersonManageComponent: ExternalPersonManageComponent) {}

	do() {
	// 步骤3
	this.externalPersonManageComponent.getListByComId()
	}
	}

	// 子组件TS文件：
	// 步骤1
	import { Output,EventEmitter } from '@angular/core';

	export class PerAddEditComponent implements OnInit {
	constructor() {}
	// 步骤2
	@Output() refresh: EventEmitter<any> = new EventEmitter<any>();

	// 步骤3
	do() {
	this.refresh.emit('');
	}
	}

	// 父组件HTML：
	<子组件 (refresh)="父组件的方法()"></子组件>