5.父子组件传参

1.父组件给子组件按传参

1.1在父组件中，子组件通过属性接收传递过来的参数

• 
  

  <app-header [title]="title"></app-header>     //自定义属性将title传过去

export class AppComponent {
  title:string = '我是angular';
}

1.2子组件中引入Input模块

import { Component, OnInit,Input } from '@angular/core';   //导入Input

1.3子组件中接收父组件传过来的值

export class HeaderComponent implements OnInit {
  @Input() title:string   //定义类型
  constructor() { }
  ngOnInit() {
  }
}

1.4子组件张使用父组件的数据

<p>{{title}}</p>

2.子组件给父组件传参

2.1子组件通过属性接收父组件传递过来的方法

<app-header  [run]="run"></app-header>

export class AppComponent {
  run(id:string){
    console.log(id)
  }
}

2.2子组件中@Input中接收

export class HeaderComponent implements OnInit {
 @Input() run:any;
  constructor() { }
  ...
  handleClick(){
    this.run("123")
  }
}

<button (click)="handleClick()">向父传参</button>

二.子组件通过@Output向父组件传参

//泛型：任意类型
class Person<T>{
    emit(msg:T){
        console.log(msg);
    }
}
var p=new Person<string>();
p.emit("msg")

2.1在子组件中导入Output,EventEmitter两个模块

import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core';

2.2子组件中实例化EventEmitter

export class HeaderComponent implements OnInit {
...
 @Output() private outer=new EventEmitter<string>();
 }
//通过点击事件传参
<button (click)="handleClick()">向父传参</button>

2.3子组件中通过EventEmitter实例化的对象outer,广播数据

export class HeaderComponent implements OnInit {
 @Output() private outer=new EventEmitter<string>();
  ...
  handleClick(){  //outer事件名  emit后面是参数
    this.outer.emit("1001011");
  }
}

2.4父组件中接收事件

//2.父组件中使用
<app-header (outer)="getId($event)" ></app-header>
export class AppComponent {
  getId(id:string){
    console.log(id)
  }
}