ng2父子模块数据交互

Posted 2020-09-24 枫叶布

一、父模块向子模块传值

//父html
<my-child [childdata]="parentdata"></my-child>

其中，my-child为子模块的selector标签，childdata为子模块声明的变量（用来保存父模块传递过来的值），parentdata为父模块声明的变量（保存着父模块的值）

子模块中引用父模块传过来的值：

//child.component.ts
import { Component, OnInit，Input } from ‘@angular/core‘;

@component({
  selector:‘my-child‘,
  ...
})
export class ChildComponent implements OnInit{
  @Input() childdata:any;
  //Do some action with childdata
}

二、子模块向父模块传递事件

子模块传出事件：

//child.component.ts
import { Component, OnInit，Output } from ‘@angular/core‘;

@component({
  selector:‘my-child‘,
  ...
})
export class ChildComponent implements OnInit{
  @OUtput() childevent=new EventEmitter();
  //Do some action
}

父html引用事件：

<my-child (childevent)="parentevent($event)"></my-child>

其中childevent为子模块事件，parentevent为父模块事件