其他分享
首页 > 其他分享> > angular父子组件方法互调方案

angular父子组件方法互调方案

作者:互联网

父组件调用子组件

子组件调用父组件

先了解组件之间的交互

父组件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

@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