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-20测试人员都是画画大神,让我看看谁还不会用代码图?
- 2024-05-20年薪百万的程序员都在用的摸鱼方式……
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了