父组件调用子组件

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

备注

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