首页 > 其他分享> 文章详细

angular父子组件方法互调方案

2022-08-25 15:01:23 阅读：213 来源： 互联网

标签：hero class angular phero 互调组件 data click

父组件调用子组件

不写了上地址 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('子组件参数');
    }
}

备注

由于时间仓促从项目中简化的代码没有经过测试。看懂原理，写起来就不难了。

标签：hero,class,angular,phero,互调,组件,data,click
来源： https://www.cnblogs.com/leadfar/p/16624178.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9