angular 父子组件通信

Posted 2022-12-03 monkey-k

1.   子组件调用父组件的方法和数据 -- Input 装饰器

 

1. fatherComponent.html中

　　toChildStr -- 父组件中定义的数据

　　fatherMethod -- 父组件中的方法

　　fatherComponent -- 父组件本身， this指代父组件实例，通过 [fatherCompoent] 将父组件实例传递给子组件

<childComponent #login [toChildStr]="toChildStr" [fatherMethod]="fatherMethod" [fatherComponent]="this"></app-login>

2. childComponent.ts 中

　　

　　通过 @Input 装饰器获取父组件属性，方法，父组件实例

export class LoginComponent implements OnInit

  @Input() toChildStr: string -- 父组件属性

  @Input() fatherMethod:any -- 父组件方法

  @Input() fatherComponent: any -- 父组件实例

  constructor()

  ngOnInit()

 

  getFatherComponentMethod()

    alert(this.toChildStr) -- -- 父组件属性

    alert(this.fatherComponent.toChildStr) -- -- 父组件实例获取父组件属性

    this.fatherComponent.fatherMethod() -- -- 父组件实例调用父组件方法

    this.fatherMethod() -- -- 父组件方法

 

 

2.   父组件调动子组件的方法和数据 -- ViewChild装饰器

　　

　　1. fatherComponent.html中

　　通过#var 方式给子组件标记

<childComponent #child></childComponent>

　　2. fatherComponent.ts中

　　通过@ViewChild（）装饰器获取子组件实例

　@ViewChild(‘child‘, null) childComponent: any

  userChildMethod()

  　　// 调用子组件方法 -- 获取属性同样写法

  　　this.childComponent.childMethod()

 

3. 通过事件触发器，子组件给父组件传参。即父组件获取子组件数据

以上两种方式都是主动获取数据或者方法。这种方式通过 EventEmitter 和 outPut 方式相当于，通过事件，子组件广播数据给父组件，父组件被动接受参数。

　　1. childComponent.ts

　　

import Output, EventEmitter from ‘@angular/core‘;

export class LoginComponent implements OnInit

  @Output() outer:any = new EventEmitter() -- 声明并且输出一个事件触发器

  public msg = "123"

  public obj =

    num: 1

 

  sendParent()

    this.outer.emit(this.obj) -- 通过事件触发器，发送数据给父组件

 

　　2. childComponent.html

　　

　　<h5>通过事件触发器，子组件向父组件广播数据</h5>

　　<button (click)="sendParent()">数据发送给父组件</button>

　　3. parentComponent.html,

通过 （事件触发器）= “方法” 的方式监听子组件发出父消息。 （事件触发器） 必须与子组件中定义的名称一致

　　

　　<childComponent (outer)="onReciveChildMsg($event)"></childComponent>

　　

　　4. parentComponent.ts

　　通过方法获取传递的参数 $event

　　onReciveChildMsg(e)

    　　alert(e.num)

    　　e.num = 2

    　　// e = "456"

    　　// this.msg = e