angular父子组件方法互调方案
2022/8/25 23:24:12
本文主要是介绍angular父子组件方法互调方案,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
父组件调用子组件
- 不写了上地址 https://blog.csdn.net/xuehu837769474/article/details/80072556
子组件调用父组件
先了解组件之间的交互
- https://angular.cn/guide/component-interaction
父组件html, hero 是父组件向子组件传书的参数
<app-child #child1 [hero]="phero"></app-child>
父组件ts
export class AppComponent implements OnInit { phero: any; ngOnInit(): void { this.phero = { // phero里定义了一个方法 click click: (data) => { //箭头函数 不会随调用者改变this this.parentMethod(data); } } } // 父级组件方法,这个方法里的this还是父组件,具体原因就不说了 parentMethod(data: any): void { console.log(data); console.log("parentMethod"); } }
子组件html, 为了方便演示,加了个button
<button (click)="doClick()">点击我触发父组件方法</button>
子组件ts,这里hero就是父组件的phero
- 就是前面 [hero]="phero" 这个地方的作用,父子组件交互。
@Component({ selector: 'app-child', templateUrl: './child.html', styleUrls: ['./child.less'] }) export class ChildComponent implements OnInit { hero: any; constructor() { } ngOnInit() { } doClick() { // 这个click就是父组件phero对象里定义的click,可以起任何名字, 写好点的话phero定义为一个class // 这里只是演示调用不在定义class console.log('子组件调用') this.hero.click('子组件参数'); } }
备注
- 由于时间仓促从项目中简化的代码没有经过测试。看懂原理,写起来就不难了。
这篇关于angular父子组件方法互调方案的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-01为什么公共事业机构会偏爱 TiDB :TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署